{% extends "basefront.html.twig" %}
{% block body %}
    <table class="table table-striped">
        <thead>
            <tr>
                <th class="text-left align-top" scope="col">
                    Playlist<br />
                    <button type="button" class="btn btn-info btn-sm active" aria-pressed="true" onclick="window.location.href='{{ path('playlists.sort', {champ:'name', ordre:'ASC'}) }}'" tabindex="0" onkeydown="if(event.key === 'Enter'){ window.location.href='{{ path('playlists.sort', {champ:'name', ordre:'ASC'}) }}'; }">
                        ↓
                    </button>
                    <button type="button" class="btn btn-info btn-sm active" aria-pressed="true" onclick="window.location.href='{{ path('playlists.sort', {champ:'name', ordre:'DESC'}) }}'" tabindex="0" onkeydown="if(event.key === 'Enter'){ window.location.href='{{ path('playlists.sort', {champ:'name', ordre:'DESC'}) }}'; }">
                        ↑
                    </button>
                    <form class="form-inline mt-1" method="POST" action="{{ path('playlists.findallcontain', {champ:'name'}) }}">
                        <div class="form-group mr-1 mb-2">
                            <input type="text" class="sm" name="recherche" 
                                   value="{% if valeur|default and not table|default %}{{ valeur }}{% endif %}">
                            <input type="hidden" name="_token" value="{{ csrf_token('filtre_name') }}">
                            <button type="submit" class="btn btn-info mb-2 btn-sm">filtrer</button>
                        </div>
                    </form>                    
                </th>
                <th  class="text-left align-top" scope="col">
                    Formations<br />
                    <!-- Tri par nombre de formations -->
                    <button type="button" class="btn btn-info btn-sm active" aria-pressed="true" onclick="window.location.href='{{ path('playlists', {sortBy: 'ASC'}) }}'" tabindex="0" onkeydown="if(event.key === 'Enter'){ window.location.href='{{ path('playlists', {sortBy: 'ASC'}) }}'; }">
                        ↓
                    </button>
                    <button type="button" class="btn btn-info btn-sm active" aria-pressed="true" onclick="window.location.href='{{ path('playlists', {sortBy: 'DESC'}) }}'" tabindex="0" onkeydown="if(event.key === 'Enter'){ window.location.href='{{ path('playlists', {sortBy: 'DESC'}) }}'; }">
                        ↑
                    </button>
                </th>
                <th class="text-left align-top" scope="col">
                    Catégories
                    <form class="form-inline mt-1" method="POST" action="{{ path('playlists.findallcontain', {champ:'id', table:'categories'}) }}">
                        <select class="form-select form-select-sm" name="recherche" id="recherche" onchange="this.form.submit()">
                            <option value=""></option>
                            {% for categorie in categories %}
                                <option 
                                    {% if valeur|default and valeur==categorie.id %} 
                                        selected
                                    {% endif %} 
                                    value="{{ categorie.id }}">{{ categorie.name }}
                                </option>
                            {% endfor %}
                        </select>                    
                    </form>            
                </th>
                <th class="text-center align-top" scope="col">
                    &nbsp;
                </th>				
            </tr>
        </thead>
        <tbody>
            <!-- boucle sur les playlists -->
            {% if playlists|length > 0 %}
                {% for k in 0..playlists|length-1 %}
                    <tr class="align-middle">
                        <td>
                            <h5 class="text-primary">
                                {{ playlists[k].name }}
                            </h5>
                        </td>    
                        <td>
                            <span>{{ playlists[k].formations|length }}</span>
                        </td>
                        <td class="text-left">
                            {% set categories = playlists[k].categoriesplaylist %}
                            {% if categories|length > 0  %}
                                {% for c in 0..categories|length-1 %}
                                    &nbsp;{{ categories[c] }}                                  
                                {% endfor %}
                            {% endif %}
                        </td>            					
                        <td class="text-center">
                            <a href="{{ path('playlists.showone', {id:playlists[k].id}) }}" class="btn btn-secondary">Voir détail</a>
                        </td> 					
                    </tr>
                {% endfor %}	
            {% endif %}
        </tbody>
    </table>
{% endblock %}