{% extends 'administrator/index.html.twig' %}
{% block conteneur %}
            <div class="row clearfix">
                <div class="col-lg-12">
                    <div style="min-height: 300px" class="card chat-app">
                        <div id="plist" class="people-list">
                            <div class=" row">

                            <div class=" col-lg-6 col-sm-6">
                                <ul class="list-unstyled chat-list mt-2 mb-0">
                                    {% for parent in parents  %}

                                        <li class="clearfix " id="{{ parent.id }}" onclick="getListEnfants({{ parent.id }})">
                                            <img src="{{ asset('assets/images/paren-avatar.png') }}" alt="avatar" />
                                            <div class="about">
                                                <div class="name">{{ parent.nom }}</div>
                                                <!--<div class="status"> <i class="fa fa-circle offline"></i> left 7 mins ago </div>
                                                -->
                                            </div>
                                            <div class="circleBase type2"></div>
                                            {% set not_opened = 0 %}

                                            {% for feedback in parent.feedbacks%}

                                                {% if feedback.isOpen == false %}
                                                    {%  set not_opened = not_opened + 1 %}
                                                {% endif %}
                                            {% endfor %}
                                            {% if not_opened != 0%}
                                            <span style="background-color: red;padding: 3px;border-radius: 50%;color: white;text-align: center;" id="parentList{{ parent.id }}" class="notification-dot">&nbsp;{{ not_opened }}</span>
                                            {% endif %}
                                        </li>
                                    {% endfor %}
                                </ul>

                            </div>
                            <div class=" col-lg-6 col-sm-6">
                                <ul class="list-unstyled chat-list mt-2 mb-0" id="listEnfants">

                                   {# {% for enfant in enfants  %}
                                        <li class="clearfix " id="{{ enfant.id }}" onclick="displayDiscussions( '{{ enfant.nom }}' ,{{ enfant.parent.id }},{{ enfant.id }}, '/enfants/images/{{ enfant.photo }}')">
                                            <img src="/enfants/images/{{ enfant.photo }}" alt="avatar" />
                                            <div class="about">
                                                <div class="name">{{ enfant.nom }}</div>
                                            </div>
                                        </li>
                                    {% endfor %}#}
                                </ul>
                            </div>
                            </div>
                        </div>
                        <div class="chat" id="ZoneChat">
                            <div class="chat-header clearfix">
                                <div class="row">
                                    <div class="col-lg-6">
                                        <a href="javascript:void(0);" data-toggle="modal" data-target="#view_info">
                                            <img id="imageEnfant" src="{{ asset('assets/images/paren-avatar.png') }}" alt="avatar" />
                                        </a>
                                        <div class="chat-about">
                                            <h6 class="m-b-0" id="enfant">Selectionner un parent puis enfant</h6>
                                            <small id="discuss"></small>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div id="discussDiv" class="chat-history">
                                <ul style="overflow-y: auto;overflow-x: hidden;height: 255px;" class="m-b-0" id="discussions">

                                </ul>
                            </div>
                            <div class="chat-message clearfix">
                                <div class="input-group mb-0">
                                    <div class="input-group-prepend">
                                        <span onclick="SendMessage()" class="input-group-text"><i class="icon-paper-plane"></i></span>
                                    </div>
                                    <input id="chatInput" type="text" class="form-control" placeholder="Enter text here...">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    


{% endblock %}