{% extends 'admin/adminBase.html.twig' %}

{% block title %}ADMINISTRATION - Edition d'une page{% endblock %}
{% block titre_page %}Edition de la page : {{ page.title }}{% endblock %}
{% block sous_titre_page %}Déplacer les éléments disponibles dans la zone souhaitée et éditer le contenu (si besoin). Chaque zone correspond à une ligne dans la page et chaque élément de zone correspond à une ou plusieurs colonnes.
Chaque ligne ne peut être constituée qu'au plus de 12 colonnes.{% endblock %}
{% block titre_icone %} {{ getMenuIcon('ADMIN_DOCUMENTS') }}{% endblock %}
{% block droit_ajout %}
    <a href="{{ path('app_admin_page_index') }}" class="btn-shadow me-3 btn btn-dark">
        <i class="fa fa-arrow-left"></i>
    </a>
{% endblock %}

{% block body %}
    <div id="page-editor-wrapper" data-page-id="{{ page.id }}"
         data-save-url="{{ path('admin_page_element_save', { page_id: page.id }) }}"
         data-update-position-url="{{ path('admin_page_element_update_position', { page_id: page.id }) }}"
         data-delete-url-template="{{ path('admin_page_element_delete', { page_id: page.id, id: '__ID__' }) }}"
         data-load-element-form-url-template="{{ path('admin_page_element_load_form', { page_id: page.id, id: '__ID__' }) }}">

        <div class="page-editor-container">

            {# Colonne des éléments disponibles #}
            <div id="available-elements-list" class="available-elements">
                <h4>Éléments disponibles</h4>
                {# draggable="true" n'est plus nécessaire ici si SortableJS gère le drag #}
                <div class="element-item" data-element-type="html">Contenu HTML</div>
                <div class="element-item" data-element-type="image">Image</div>
                <div class="element-item" data-element-type="coordonnees">Coordonnées</div>
                <div class="element-item" data-element-type="slider">Slider</div>
                <div class="element-item" data-element-type="contact_form">Formulaire de contact</div>
                <div class="element-item" data-element-type="google_map">Google Map</div>
                <div class="element-item" data-element-type="service">Bloc Services</div>
                <div class="element-item" data-element-type="reassurance">Bloc réassurance</div>
                <div class="element-item" data-element-type="carte">Carte des plats</div>
            </div>

            {# Colonne des zones de la page #}
            <div class="page-zones">
                {% set zones = getZones() %}

                {% for zone_key, zone_name in zones %}
                    <div class="drop-zone" data-zone-id="{{ zone_key }}">
                        <h5>{{ zone_name }}</h5>
                        {% for element in page.pageElements|filter(el => el.zone == zone_key)|sort((a, b) => a.position <=> b.position) %}
                            <div class="page-element"
                                 data-element-id="{{ element.id }}"
                                 data-element-type="{{ element.type }}"> {# draggable="true" est implicite pour les items de SortableJS #}
                                <span class="element-info">
                                    <strong>Type:</strong> {{ element.type|capitalize }}
                                    {% if element.type == 'html' and element.content.html is defined and element.content.html is not empty %}
                                        <em>(Contient du texte)</em>
                                    {% elseif element.type == 'slider' and element.content.slider_id is defined %}
                                        <em>(Slider ID: {{ element.content.slider_id }})</em>
                                    {% endif %}
                                </span>
                                <div class="actions">
                                    <button type="button" class="btn btn-sm btn-primary btn-edit-element" data-element-id="{{ element.id }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-square" viewBox="0 0 16 16"><path d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.813z"/><path fill-rule="evenodd" d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5z"/></svg>
                                        Éditer
                                    </button>
                                    <button type="button" class="btn btn-sm btn-danger btn-delete-element" data-element-id="{{ element.id }}">
                                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16"><path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/></svg>
                                        Supprimer
                                    </button>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% endfor %}
            </div>
        </div>
    </div>
{% endblock %}