{% extends '::base2.html.twig' %}
{% block title %}Gestion Comptes - Liste{% endblock %}
{% block stylesheets %}{{ parent() }}{% endblock %}

{% block body %}
    <div style="background-color: white;" class="cd-horizontal-timeline mt-timeline-horizontal" data-spacing="60">
        <div class="timeline">
            <div class="events-wrapper">
                <div class="events">
                    <ol>
                        {% set i = 0 %}
                        {% for timeLine in timesLine %}
                            <li>
                                <a href="#" data-date="{{ timeLine.dateCreate|date('d/m/Y') }}"
                                   class="border-after-red bg-after-red {% if i == 0 %} selected {% endif %}">{{ timeLine.dateCreate|date('j M') }}</a>
                            </li>
                            {% set i = i+1 %}
                        {% endfor %}

                    </ol>
                    <span class="filling-line bg-red" aria-hidden="true"></span>
                </div>
                <!-- .events -->
            </div>
            <ul class="cd-timeline-navigation mt-ht-nav-icon">
                <li>
                    <a href="#" class="prev inactive btn btn-outline red md-skip">
                        <i class="fa fa-chevron-left"></i>
                    </a>
                </li>
                <li>
                    <a href="#" class="next btn btn-outline red md-skip">
                        <i class="fa fa-chevron-right"></i>
                    </a>
                </li>
            </ul>
        </div>
        <div class="events-content">
            <ol>
                {% set x = 0 %}
                {% for timeLine in timesLine %}
                    <li {% if x == 0 %} class="selected" {% endif %} data-date="{{ timeLine.dateCreate|date('d/m/Y') }}">
                        <div class="mt-title">
                            <h6 class="mt-content-title">
                                {{ timeLine.status }}  {{ timeLine.superviseur.FinctionString }}
                            </h6>
                        </div>
                        <div class="mt-author">
                            <div class="mt-avatar">
                                {% if timeLine.superviseur.path is empty %}
                                    <img src="{{ asset('uploads/images/common/empty-profile.jpg') }}"
                                         class="img-responsive avatar-view"/>
                                {% else %}
                                    <img src="{{ asset('uploads/images/' ~ timeLine.superviseur.path) }}"
                                         class="img-responsive avatar-view"/>
                                {% endif %}
                            </div>
                            <div class="mt-author-name">
                                <a href="javascript:;" class="font-blue-madison">{{ timeLine.superviseur }}</a>
                            </div>
                            <div class="mt-author-datetime font-grey-mint">{{ timeLine.dateCreate|date('d M Y à H:m') }}</div>
                        </div>
                        <div class="clearfix"></div>
                    </li>
                    {% set x = x+1 %}
                {% endfor %}
            </ol>
        </div>
    </div>

    {% block javascripts %}
        {{ parent() }}

        <script src="{{ asset('back/assets/global/plugins/jquery.min.js') }}"></script>
        <script src="{{ asset('back/assets/global/plugins/horizontal-timeline/horizontal-timeline.js') }}"></script>
    {% endblock %}

{% endblock %}