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

{% block title %}Admin TAM : Accueil{% endblock %}

{% block body %}
    <main>
        <section class="hero hero-admin">
            <p class="admin-title">Images du carousel</p>
                <div id="carousel" class="carousel__gallery">
                    {% for carouselImage in carouselImages %}
                        <div class="carousel__gallery__card element-to-move" data-id="{{ carouselImage.id }}">
                            <button class="position-button leftButton">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
                                </svg>
                            </button>
                            <button class="position-button rightButton">
                                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
                                    fill="currentColor" viewBox="0 0 16 16">
                                    <path fill-rule="evenodd"
                                        d="M4.646 1.646a.5.5 0 0 0 0 .708L10.293 8l-5.647 5.646a.5.5 0 0 0 .708.708l6-6a.5.5 0 0 0 0-.708l-6-6a.5.5 0 0 0-.708 0"/>
                                </svg>
                            </button>
                            <img src="{{ asset(carouselImage.getGalleryImage.path) }}" alt="{{ carouselImage.getGalleryImage.alt }}">
                            <form method="post" action="{{ path(app.current_route ~ '_carousel_delete', {id: carouselImage.id}) }}">
                                <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ carouselImage.id) }}">
                                <button class="delete__button">Supprimer</button>
                            </form>
                        </div>
                    {% endfor %}

                </div>
                {% if carouselImages is not empty %}
                <button id="carousel_reorder" class="reorder">Enregistrer l'ordre des images</button>
                {% endif %}

                <div id="carousel-error" class="tabs-form">
                    <div class="tabs-form__tabs">
                        <button class="tabs-form__tab-button tabs-form__tab-button--active" data-tab="galerie-image">Ajouter une image de la galerie</button>
                        <button class="tabs-form__tab-button" data-tab="uploaded-image">Envoyer une image</button>
                    </div>
                    <div class="form">
                        {{ form_start(carouselForm) }}
                        {{ form_errors(carouselForm) }}
                        {{ form_errors(carouselForm.galleryImage) }}
                        {{ form_errors(carouselForm.uploadedImage) }}
                        {{ form_errors(carouselForm.alt) }}
                        <div class="tabs-form__tab-content tabs-form__tab-content--active" data-tab="galerie-image">
                            <div id="galleryImage">
                                {% for choice in carouselForm.galleryImage %}
                                {% if choice.vars.name === 'placeholder' %}
                                    <div class="hide-image">
                                        {{ form_widget(choice) }}
                                        <label for="{{ choice.vars.id }}">
                                            <p>{{ choice.vars.label }}</p>
                                            <img src="https://upload.wikimedia.org/wikipedia/commons/3/3f/Placeholder_view_vector.svg" alt="">
                                        </label>
                                    </div>
                                {% else %}
                                    {# Si l'image n'est pas déjà dans le carrousel #}
                                    <div class="{{ choice.vars.name|number_format in carouselGalleryIds ? 'hide-image' }}">
                                        {{ form_widget(choice) }}
                                        <label for="{{ choice.vars.id }}">
                                            <p>{{ choice.vars.label }}</p>
                                            <img src="{{ asset(galleryImages[loop.index - 2].path) }}" alt="">
                                        </label>
                                    </div>
                                {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                        <div class="tabs-form__tab-content" data-tab="uploaded-image">
                            <div class="tabs-form__upload-image">
                                {{ form_widget(carouselForm.uploadedImage) }}
                                <div class="form-label-with-help">
                                    {{ form_label(carouselForm.alt) }}
                                    <span
                                        class="help-tooltip"
                                        title="{{ carouselForm.alt.vars.help }}"
                                    >
                                    ⓘ
                                    </span>
                                </div>
                                {{ form_widget(carouselForm.alt) }}
                            </div>
                        </div>
                        <div class="carousel-form__add">{{ form_row(carouselForm.save) }}</div>
                        {{ form_end(carouselForm) }}
                    </div>
                </div>
        </section>
        {% include "partials/_left_banner.html.twig" %}
            <section id="homeSections" class="home section">
                {% include "back/partials/_sections.html.twig" %}
            </section>
        {% include "partials/_right_banner.html.twig" %}
    </main>
{% endblock %}