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

{% block title %}
{% if titre is defined %}{{ parent() }} - {{ titre }}{% else %}{{ parent() }}{% endif %}
{% endblock %}

{% block titre %}
{% if titre is defined %}{{ titre }}{% else %}{{ parent() }}{% endif %}
{% endblock %}

{% block body %}
    {#{{ form(form) }}#}
    <form class="mb-3" action="{{ path('videotheque_ajouter_tmdb') }}">
        <div class="input-group">
            <input class="form-control" name="query" type="text" placeholder="{{ "search_in_tmdb" | trans}}" aria-label="Recherche" {% if recherche != "" %}value="{{ recherche }}"{% endif %}>
            <button class="btn btn-primary" type="submit">{{ "Rechercher" | trans }}</button>
        </div>
    </form>
    <div class="">
        {% if nbFilms > 0 %}
            <span class="fw-light small">{{ nbFilms }} résultat{{ nbFilms > 1 ? 's' }}</span>
            <nav aria-label="...">
                <ul class="pagination">
                  <li class="page-item {{ page == 1 ? 'disabled'}}">
                    <a class="page-link" href="{{ path('videotheque_ajouter_tmdb', {'query': recherche, 'page': page - 1} ) }}">{{ "Previous" | trans }}</a>
                  </li>
                  {% for p in 1..nbPages %}
                    <li class="page-item {{ page == p ? 'active'}}" {{ page == p ? 'aria-current="page"'}}>
                        <a class="page-link" href="{{ path('videotheque_ajouter_tmdb', {'query': recherche, 'page': p } ) }}">{{ p }}</a>
                    </li>
                  {% endfor %}
                  <li class="page-item {{ page == nbPages ? 'disabled'}}">
                    <a class="page-link" href="{{ path('videotheque_ajouter_tmdb', {'query': recherche, 'page': page + 1} ) }}">{{ "Next" | trans }}</a>
                  </li>
                </ul>
              </nav>
        {% endif %}
    </div>
    <table class="table table-borderless table-sm align-middle">
        <thead>
            <tr class="border-bottom">
                <th>&nbsp;</th>
                <th>Titre</th>
                <th>Date de sortie</th>
                <th>Genre</th>
                <th>Realisateur</th>
            </tr>
        </thead>
        <tbody>
            {% if nbFilms == 0 %}
                <tr>
                    <td colspan="5" class="text-center">Pas de résultat</td>
                <tr>
            {% endif %}
            {% for idtmdb, film in films %}
                <tr class="{{ film.information ? '' : 'border-bottom' }}">
                    <td><a type="button" class="btn btn-primary" href="{{ path('videotheque_ajouter', {'idtmdb': idtmdb }) }}">Créér</a></td>
                    <td>{{ film.titre }}</td>
                    <td>{% if film.dateSortie %}{{ film.dateSortie | date ('d/m/Y')}}{% endif %}</td>
                    <td>{% for genre in film.genres %}<span class="badge bg-info me-1">{{ genre.name }}</span>{% endfor %}</td>
                    <td>{% for realisateur in film.realisateurs %}<span class="badge bg-info me-1">{{ realisateur.nomComplet }}</span>{% endfor %}</td>
                </tr>
                {% if film.information %}
                    <tr data-controller="collapser" class="border-bottom">
                        <td colspan="5">
                            <div class="d-flex">
                                <a class="ms-auto" href="#collapseResume-{{ idtmdb }}" role="button" data-bs-target="#collapseResume-{{ idtmdb }}" data-bs-toggle="collapse" aria-expanded="false" aria-controls="collapseResume-{{ idtmdb }}">
                                    Résumé
                                    <i class="fa fa-chevron-right fa-xs" data-collapser-target="button"></i>
                                </a>
                            </div>
                            <div id="collapseResume-{{ idtmdb }}" class="collapse" data-collapser-target="collapse">
                                {{ film.information }}
                            </div>
                        </td>
                    </tr>
                {% endif %}
            {% endfor %}
        </tbody>
    </table>
{% endblock %}