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

{% block title %}Liste musique{% endblock %}

{% block body %}
    <div class= text-aligne-between>
        <h1>Liste des musiques</h1>
        {# <a class="btn btn-success me-2" style= "justify-content-end" href="{{ path('app_back_song_new') }}">Créer</a> #}
    </div>
    <div class="d-flex justify-content-end">
        <form method="get" action="{{ path('app_back_song_index') }}" class="form-inline">
            <div class="d-flex">
                <div class="form-group mr-2">
                    <label for="order">Trier par :</label>
                    <select id="order" name="order" class="form-control">
                        <option value="ttlASC" {% if order == 'ttlASC' %}selected{% endif %}>Nom (A-Z)</option>
                        <option value="ttlDESC" {% if order == 'ttlDESC' %}selected{% endif %}>Nom (Z-A)</option>

                        <option value="tNbASC" {% if order == 'tNbASC' %}selected{% endif %}>Piste (1-9)</option>
                        <option value="tNbDESC" {% if order == 'tNbDESC' %}selected{% endif %}>Piste (9-1)</option>

                        <option value="drtASC" {% if order == 'drtASC' %}selected{% endif %}>Durée (plus courte)</option>
                        <option value="drtDESC" {% if order == 'drtDESC' %}selected{% endif %}>Durée (plus longue)</option>
                    </select>
                <button class="btn btn-primary ml-2" type="submit">Trier</button>
            </div>
                <div class="form-group">
                    <label for="limit">Afficher :</label>
                    <select id="limit" name="limit" class="form-control">
                        {% for limit in limits %}
                            <option value="{{ limit }}" {% if limit == currentLimit %}selected{% endif %}>{{ limit }}</option>
                        {% endfor %}
                    </select>
                    <button class="btn btn-primary ml-2" type="submit">Appliquer</button>
                </div>
            </div>
        </form>
    </div>
        <table class="table">
            <thead>
                <tr>
                    <th>N° de piste</th>
                    <th>Titre</th>
                    <th>Album</th>
                    <th>Durée</th>
                    <th>Ecoute</th>
                </tr>
            </thead>
            <tbody>
            {% for song in songs %}
                <tr>
                    <td>{{ song.trackNb }}</td>
                    <td>{{ song.title }}</td>
                    <td>{{ song.album.name }}</td>
                    <td>{{ song.duration }}</td>
                    <td>{{ song.preview }}</td>
                    <td>
                        <a class="btn btn-info me-1" href="{{ path('app_back_song_show', {'id': song.id}) }}">voir plus</a>
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="6">Aucune musique de disponible</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
            <div class="navigation d-flex justify-content-center">
                {{ knp_pagination_render(songs) }}
            </div>
{% endblock %}