{% extends 'admin/admin.html.twig' %}

{% block title %}Discussions{% endblock %}

{% block contenu %}
   <!-- <h1>FeedBack index</h1>

    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Titre</th>
                <th>Message</th>
                <th>BackAt</th>
                <th>actions</th>
            </tr>
        </thead>
        <tbody>
        {# for feed_back in feed_back #}
            <tr>
                <td>{# feed_back.id #}</td>
                <td>{# feed_back.titre #}</td>
                <td>{# feed_back.message #}</td>
                <td>{# feed_back.backAt ? feed_back.backAt|date('Y-m-d H:i:s') : '' #}</td>
                <td>
                    <a href="{# path('feed_back_show', {'id': feed_back.id}) #}">show</a>
                    <a href="{# path('feed_back_edit', {'id': feed_back.id}) #}">edit</a>
                </td>
            </tr>
        {# else #}
            <tr>
                <td colspan="5">no records found</td>
            </tr>
        {# endfor #}
        </tbody>
    </table>

    <a href="{# path('feed_back_new') #}">Créer</a>
    -->
    <div class="row">
    <div class="col-md-4">
        <h2>Liste des parents</h2>
        <ul class="list-group">
            <ul class="list-group">
                {% for parent in parents %}
                    <li class="list-group-item"><button onclick="enfants({{ parent.id }})">{{ parent.nom }} - {{ parent.id }}</button></li>
                {% endfor %}

            </ul>
        </ul>
    </div>
    <div class="col-md-4">
        <h2>Liste des enfants</h2>
        <ul class="list-group" id="enfants">

        </ul>
    </div>
    <div class="col-md-4">
        <h3>Discussions</h3>

    </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script>
    function enfants(x){
        console.log(this.parentNode);
       console.log("you've selected "+x);
       const kids = [
           {id:1,name: 'Ahmed'},
           {id:2,name: 'Mariem'},
           {id:3,name: 'Abeer'},
           {id:4,name: 'Amine'}
       ];
       console.log(kids);
        const enfantsElements = document.getElementById('enfants');
        kids.forEach(function(item,index){
            console.log(typeof item);
            const li = document.createElement('li');
            li.className = 'list-group-item';
            li.appendChild(document.createTextNode(item.name));
            enfantsElements.appendChild(li);
        })

    }
    </script>
{% endblock %}