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

{% block title %}Ajouter une image{% endblock %}

{% block body %}
    <h1 class="wrap text-light font-h text-center">CHOISIR {{type == 'profile' ? 'UNE PHOTO DE PROFIL' : 'UN FOND DE CARTE'}}</h1>

    <div class="wrap admin-buttons mh-4">
        <div class="d-grid w-auto">
            <a class="button" href="/cheval/{{ cheval.getId() }}/modifier">
                <i class="fa-solid fa-pen-to-square mr-1"></i> Annuler
            </a>
        </div>
    </div>

    <section class="wrap mh-4">
        <div class="text-white text-center m-0 mb-3 p-0 ph-1">
            Cliquez sur l'image que vous souhaitez comme {{type == 'profile' ? 'photo de profil' : 'fond de carte'}} pour {{cheval.getNomCheval()}}.
        </div>

        <div class="media-gallery mb-4">
            {% for image in cheval.getListeImages() %}
                <div>
                    <a href="{% if type == 'profile' %}
                            {{ path('app_horse_gallery_image_pfp', {'id': cheval.getId(), 'image': image.getIdImage().getId()}) }}
                        {% else %}
                            {{ path('app_horse_gallery_image_card', {'id': cheval.getId(), 'image': image.getIdImage().getId()}) }}
                        {% endif %}"
                    >
                        <div class="border-highlight bg-white p-1">
                            <img class="media-thumbnail" src="{{ vich_uploader_asset(image.getIdImage()) }}" alt="{{ image.getIdImage().getTexteAlt() }}">
                            <p class="m-0 p-1 pt-2">
                                {{image.getIdImage().getTexteAlt()}}
                            </p>
                        </div>
                    </a>
                </div>
            {% endfor %}
        </div>
    </section>
{% endblock %}