{% extends 'base.html.twig' %}
{% block title %}Mes Favoris{% endblock %}

{% block body %}
<main class="container">
    <h1>Mes Films Favoris</h1>
    <form action="{{ path('favorite_clear') }}" method="post" class="clear-favorites-form">
        <button type="submit" class="btn btn-danger">Effacer Tous les Favoris</button>
    </form>
    <div class="grid-container">
        {% if favorites|length > 0 %}
            {% for favorite in favorites %}
                <div class="card">
                    <a href="{{ path('film_detail', {'id': favorite.filmId}) }}"><img src="https://image.tmdb.org/t/p/w300{{ favorite.chemin }}" class="card-img-top" alt="{{ favorite.titre }}"></a>
                    <div class="card-body">
                        <h5 class="card-title">{{ favorite.titre }}</h5>
                        <p>Added on: {{ favorite.dateDeCreation|date('Y-m-d') }}</p>
                        <a href="{{ path('film_detail', {'id': favorite.filmId}) }}" class="btn btn-primary">Détails</a>
                        <form action="{{ path('favorite_delete', {'id': favorite.filmId}) }}" method="post" class="d-inline">
                            <input type="hidden" name="_token" value="{{ csrf_token('delete_favorite_' ~ favorite.filmId) }}">
                            <input type="hidden" name="redirect_url" value="{{ app.request.uri }}">
                            <button type="submit" class="btn btn-danger">Retirer des Favoris</button>
                        </form>
                    </div>
                </div>
            {% endfor %}
        {% else %}
            <p>Aucun film favori trouvé pour cette page.</p>
        {% endif %}
    </div>
            <button id="backToTopBtn" class="btn btn-secondary">&#8679;</button>

</main>
{% endblock %}
{% block javascript %}
    <script src="{{ asset('asset/js/app.js') }}"></script>
{% endblock %}