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

{% block title %}Hello FavoritesController!{% endblock %}

{% block body %}
<!-- main -->

    <div class="container-xl bg-light p-5 border-top">

        <div class="row mb-2">

            <h2 class="text-muted fw-bold mb-4">Ma liste</h2>
            {% for movie in movies %}
                {#
                <div class="alert alert-success alert-dismissible fade show" role="alert">
                    <strong>{{ movie.title }}</strong> a été ajouté à votre liste de favoris.
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
                #}
                <div class="col-6">

                    <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm bg-white position-relative">
                        <div class="col-4 movie__poster" style="background-image: url({{ movie.poster }});">
                            <img src="images/poster-placeholder.png" class="img-fluid">
                            <!-- img src="https://m.media-amazon.com/images/M/MV5BNThmZGY4NzgtMTM4OC00NzNkLWEwNmEtMjdhMGY5YTc1NDE4XkEyXkFqcGdeQXVyMTQxNzMzNDI@._V1_SX300.jpg" class="img-fluid" -->
                        </div>
                        <div class="col-8 p-4 d-flex flex-column position-static">
                            
                            {% include "front/partials/_favorites.html.twig" with {'movieIDForPartial': movie.id}  %}

                            {#
                            <a href="{{ path('app_front_favorites_remove', {'id': movie.id })}}" class="movie__favorite fs-1 my-2 mx-3 link-danger"><i class="bi bi-bookmark-x-fill"></i></a>
                            #}
                            
                            <strong class="d-inline-block mb-2 text-primary">{{ movie.type.name }}</strong>
                            <h3 class="mb-1">{{ movie.title }}</h3>
                            <div class="mb-1 text-muted">{{ movie.duration }} min</div>
                            <a href="{{ path('app_front_movie_show', {'id': movie.id })}}" class="fs-1 mt-3 text-danger align-self-start">
                                <i class="bi bi-arrow-right-square"></i>
                            </a>
                        </div>
                    </div>
                
                </div>
            {% else %}
                <em>vous n'avez pas encore de favoris</em>
            {% endfor %}
            
            {#
            <div class="col-6">

                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm bg-white position-relative">
                    <div class="col-4 movie__poster" style="background-image: url(https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_SX300.jpg);">
                        <!-- img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_SX300.jpg"
                            class="img-fluid" -->
                        <img src="images/poster-placeholder.png" alt="">
                    </div>
                    <div class="col-8 p-4 d-flex flex-column position-static">
                        <a href="" class="movie__favorite fs-1 my-2 mx-3 link-danger"><i class="bi bi-bookmark-x-fill"></i></a>
                        <strong class="d-inline-block mb-2 text-success">Série</strong>
                        <h4 class="mb-1">Game of Thrones</h4>
                        <div class="mb-1 text-muted">52 min</div>
                        <a href="" class="fs-1 mt-3 text-danger align-self-start">
                            <i class="bi bi-arrow-right-square"></i>
                        </a>
                        
                    </div>
                </div>
            </div>

            <div class="col-6">

                <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm bg-white position-relative">
                    <div class="col-4 movie__poster" style="background-image: url(https://m.media-amazon.com/images/M/MV5BN2ZmYjg1YmItNWQ4OC00YWM0LWE0ZDktYThjOTZiZjhhN2Q2XkEyXkFqcGdeQXVyNjgxNTQ3Mjk@._V1_SX300.jpg);">
                        <!-- img src="https://m.media-amazon.com/images/M/MV5BYTRiNDQwYzAtMzVlZS00NTI5LWJjYjUtMzkwNTUzMWMxZTllXkEyXkFqcGdeQXVyNDIzMzcwNjc@._V1_SX300.jpg"
                            class="img-fluid" -->
                        <img src="images/poster-placeholder.png" alt="">
                    </div>
                    <div class="col-8 p-4 d-flex flex-column position-static">
                        <a href="" class="movie__favorite fs-1 my-2 mx-3 link-danger"><i class="bi bi-bookmark-x-fill"></i></a>
                        <strong class="d-inline-block mb-2 text-success">Série</strong>
                        <h4 class="mb-1">Stranger Things</h4>
                        <div class="mb-1 text-muted">50 min</div>
                        <a href="" class="fs-1 mt-3 text-danger align-self-start">
                            <i class="bi bi-arrow-right-square"></i>
                        </a>
                        
                    </div>
                </div>
            </div>
            #}
        </div>

        <div class="col">
            <a href="{{ path('app_front_favorites_clear')}}" class="btn btn-danger btn-sm" onclick="return confirm('Vider votre liste de favoris ?');">Vider la liste</a>
        </div>

    </div>
{% endblock %}