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

{% block title %}AFC E-Learning{% endblock %}

{% block body %}
    <div class="container-fluid p-5">
     <h2 class="text-secondary mb-3">Liste des comptes stagiaires</h2>
        <div class="row mx-0 bg-white py-3 mb-3">
            <div class="col-2">
                <a href="{{ path('admin_learner_account_create') }}" class="secondary-btn">Créer un compte</a>
            </div>
            {# Searchbar #}
            <div class="col-10">
                {{ form_start(form) }}
                <div class="row px-0">
                    <div class="col-lg-3">{{ form_widget(form.lastname) }}</div>
                    <div class="col-lg-3">{{ form_widget(form.firstname) }}</div>
                    <div class="col-lg-3">{{ form_widget(form.state) }}</div>
                    <div class="col-lg-3">
                        <input type="submit" value="Rechercher" class="btn secondary-btn shadow-sm">
                    </div>
                </div>
                {{ form_end(form) }}
            </div>
            {# Searchbar #}
        </div>

        <table class="table table-hover table-striped bg-white text-center">
            <thead class="bg-primary text-light">
                <tr>
                    {# <th>ID</th> #}
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Email</th>
                    <th>Téléphone</th>
                    <th>Status</th>
                    <th>Formations suivis</th>
                    <th>Modifier</th>
                </tr>
            </thead>
            <tbody>
                {% for la in learners %}
                    <tr>
                       {#  <td>{{ la.id }}</td> #}
                        <td>{{ la.lastname }}</td>
                        <td>{{ la.firstname }}</td>
                        <td>{{ la.email }}</td>
                        <td>{{ la.phone }}</td>
                        <td>{% if la.state == false %} <strong class="text-danger">Désactivé</strong> {% else %} <strong class="text-success"> Activé </strong> {% endif %}</td>
                        <td style="min-width: 300px;">
                        <ul class="list-group">
                            {% for ts in la.trainingStages %}
                                <li class="list-group-item">{{ ts.trainingTitle }} <br>
                                    <div class="d-flex align-items-center justify-content-center">
                                    {% for sm in ts.stateModule %}
                                        {% if sm == true %}
                                            <span class="mx-1 badge {% if ts.trainingCompleted == true %} bg-success {% else %} bg-primary {% endif %}"><span class="secondary-color">-</span></span>
                                        {% else %}
                                            <span class="mx-1 badge bg-secondary text-secondary">-</span>
                                        {% endif %}
                                    {% endfor %}

                                    {% if ts.trainingCompleted == true %}<span class="material-icons text-success">task_alt</span>{% endif %}
                                    </div>
                                </li>
                            {% endfor %}
                        </ul>
                        </td>
                        <td>
                            <a href="{{ path('admin_learner_account_edit', {'id': la.id}) }}" class="secondary-btn">Modifier le compte</a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}