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

{% block title %}{{ cheval.getNomCheval() }}{% endblock %}

{% block body %}
    <h1 class="wrap text-light font-h text-center">GALERIE DE {{ cheval.getNomCheval() }}</h1>

    <div class="wrap mh-4">
        <div class="admin-buttons">
            <div class="d-grid w-auto">
                <a class="button" href="/cheval/{{ cheval.getId() }}">
                    <i class="fa-solid fa-arrow-left mr-1"></i> Voir le profil de {{cheval.getNomCheval()}}
                </a>
            </div>

            {% if is_granted('IS_AUTHENTICATED_FULLY') %}
            <div class="d-grid w-auto">
                <a class="button button-success text-center" href="{{ path('app_horse_gallery_image_new', {'id': cheval.getId()}) }}">
                    <i class="fa-solid fa-image mr-1"></i> Ajouter une image
                </a>
            </div>

            <div class="d-grid w-auto">
                <a class="button button-success text-center" href="{{ path('app_horse_gallery_image_new', {'id': cheval.getId()}) }}">
                    <i class="fa-solid fa-film mr-1"></i> Ajouter une vidéo
                </a>
            </div>
            {% endif %}
        </div>
    </div>

    <section class="wrap mb-4">
        <h2 class="wrap text-light font-h text-center">IMAGES</h2>

        <div class="media-gallery mb-4">
            {% for image in cheval.getListeImages() %}
                <div>
                    <a href="{{ path('app_image_show', {'id': image.getIdImage().getId()}) }}">
                        <div class="border-highlight bg-white p-1">
                            <img class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdImage()) }}" alt="{{ image.getIdImage().getTexteAlt() }}">
                            <p class="bg-white m-0 p-1 pt-2">
                                {{image.getIdImage().getTexteAlt()}}
                            </p>
                        </div>
                    </a>
                    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                        <div class="d-grid input-2">
                            <a 
                                class="button button-danger button-max text-center" 
                                href="{{ path('app_horse_gallery_image_remove', {'id': cheval.getId(), 'image': image.getIdImage().getId()}) }}"
                            >
                                <i class="fa-solid fa-trash-can mr-1"></i> Retirer de la galerie
                            </a>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                <div class="bg-black-40 text-primary p-3 span-3 text-center">
                    {{cheval.getNomCheval()}} n'a pas d'images
                </div>
            {% endfor %}
        </div>

        <h2 class="wrap text-light font-h text-center">VIDÉOS</h2>
        <div class="media-gallery mb-4">
            {% for video in cheval.getListeVideos()|slice(0, 3) %}
                <div>
                    <video class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdVideo()) }}" width="320" height="240" controls loop></video> 
                    {% if is_granted('IS_AUTHENTICATED_FULLY') %}
                        <div class="d-grid">
                            <a 
                                class="button button-danger button-max text-center" 
                                href="{{ path('app_horse_gallery_image_remove', {'id': cheval.getId(), 'image': image.getIdImage().getId()}) }}"
                            >
                                <i class="fa-solid fa-trash-can mr-1"></i> Retirer de la galerie
                            </a>
                        </div>
                    {% endif %}
                </div>
            {% else %}
                <div class="bg-black-40 text-primary p-3 span-3 text-center">
                    {{cheval.getNomCheval()}} n'a pas de vidéos
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}