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

{% block title %}Stagiaires{% endblock %}

{% block body %}

<div class="uk-container">

    <div class="uk-animation-slide-bottom">
        <p class="uk-text-center">
        <h1>Liste des stagiaires</h1>
        </p>
    </div>
    
    <div class="separator"></div>

    {% if students|default %}

    <div class="tabs-active uk-animation-fade">
        <table id="table-list" class="uk-padding ui celled selectable padded table">
            <thead>
                <tr>
                    <th class="single line">ID</th>
                    <th>Nom</th>
                    <th>Prénom</th>
                    <th>Adresse</th>
                    <th>Ville</th>
                    <th>Code postal</th>
                    <th>Téléphone</th>
                    <th>Date de naissance</th>
                    <th>Editer</th>
                    <th>Supprimer</th>
                </tr>
            </thead>
            <tbody>
                {% for student in students %}
                <tr onclick="window.location='{{ path('detail_student', {'id': student.id }) }}';"
                    style="cursor:pointer;">
                    <td class="ui center aligned header">{{ student.id }}</td>
                    <td class="single line">{{ student.firstName }}</td>
                    <td>{{ student.lastName }}</td>
                    <td>{{ student.address }}</td>
                    <td>{{ student.city }}</td>
                    <td>{{ student.zipCode }}</td>
                    <td>{{ student.phoneNumber }}</td>
                    <td>{{ student.birthday | date('d-m-Y') }}</td>
                    <td>
                        <a href="#" uk-tooltip="title: Éditer; pos: top-left"
                            onclick="editStudent(event, '{{ path('edit_student', {'id': student.id }) }}'); event.stopPropagation();" class="ui-button ui-widget ui-corner-all">
                            <i class="edit icon right floated"></i>
                        </a>
                    </td>
                    <td>
                        <a href="#" uk-tooltip="title: Supprimer; pos: top-left" 
                        onclick="editStudent(event, '{{ path('delete_student', {'id': student.id }) }}'); event.stopPropagation();" class="ui-button ui-widget ui-corner-all">
                            <i class="trash icon right floated"></i>
                        </a>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        <div class="uk-text-center uk-padding-top">

            <div class="ui small pagination menu">
                <a class="icon item prevPage"><i class="left chevron icon"></i></a>
                <div id="pagination" class="ui small pagination menu"></div>
                <a class="icon item nextPage"><i class="right chevron icon"></i></a>
            </div>
            <div class="uk-text-right uk-padding-top">
                <a href="{{ path('new_student') }}" class="ui-button ui-widget ui-corner-all">
                    <i class="user icon"></i>Ajouter
                </a>
            </div>
        </div>
    </div>
    {% else %}
    <h2>Aucune informations en base de données</h2>
    {% endif %}
</div>
{% endblock %}