{#
 # PAGE ADMIN : LES MASQUES OFFICIELS DE SLIDIA
 #
 # Ceux que tout le monde voit et que personne ne possède. Jusqu'ici ils n'existaient que par
 # les fixtures : en ajouter un demandait un déploiement. Cet écran leur donne le traitement
 # des masques personnels — déposer, renommer, supprimer.
 #
 # La grille est VISUELLE, pas tabulaire, contrairement aux autres écrans d'administration :
 # un masque ne se reconnaît pas à son nom mais à son allure, et c'est précisément ce qu'un
 # tableau ne montre pas.
 #
 # DONNÉES REQUISES (Admin\SlidiaTemplateController::list) : masques, usages.
 #}

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

{% block title %}Masques Slidia — Admin{% endblock %}

{% block body %}
{% set sdColor = tool_color_details['slidia'] %}
{% set sdRgb   = sdColor.primary|hex_to_rgb %}

<style>
    .adm-masques .adm-drop {
        border: 1.5px dashed rgba(var(--color-primary-rgb), .32);
        background: rgba(var(--color-primary-rgb), .035);
        transition: border-color .18s ease, background-color .18s ease;
    }
    .adm-masques .adm-drop:hover,
    .adm-masques .adm-drop.is-dragging {
        border-color: var(--color-primary);
        background: rgba(var(--color-primary-rgb), .08);
    }
    .adm-masques .adm-drop.is-uploading { opacity: .55; pointer-events: none; }

    .adm-masques .adm-card {
        background: #fff; border: 1px solid #f1f1f4; border-radius: 1rem; overflow: hidden;
        box-shadow: 0 2px 10px rgba(0,0,0,.05);
        transition: box-shadow .2s ease, transform .2s ease;
    }
    .adm-masques .adm-card:hover { box-shadow: 0 8px 26px rgba(0,0,0,.09); transform: translateY(-2px); }
    .adm-masques .adm-card__preview { aspect-ratio: 16/10; background: #f8f7f4; display: block; }
    .adm-masques .adm-card__preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
</style>

<div class="adm-masques max-w-[1200px] mx-auto"
     data-controller="admin--slidia-templates"
     style="--color-primary: {{ sdColor.primary }}; --color-primary-rgb: {{ sdRgb }};">

    {% include '_molecules/page-header/page-header.html.twig' with {
        title: 'Masques Slidia',
        subtitle: "Les masques officiels, proposés à tous les comptes. Déposez un .pptx pour en ajouter un.",
        icon: 'bubul-slidia',
        backHref: path('app_dashboard'),
        backLabel: 'Retour au dashboard'
    } only %}

    {# Jeton unique pour les trois écritures de cet écran : dépôt, renommage, suppression. #}
    <input type="hidden" value="{{ csrf_token('admin_slidia_template') }}"
           data-admin--slidia-templates-target="csrf">

    {# ── Dépôt ──────────────────────────────────────────────────────────── #}
    <label class="adm-drop flex items-center gap-4 rounded-2xl px-6 py-5 mt-8 cursor-pointer"
           data-admin--slidia-templates-target="dropzone"
           data-action="dragover->admin--slidia-templates#onDragOver dragleave->admin--slidia-templates#onDragLeave drop->admin--slidia-templates#onDrop">
        <input type="file" accept=".pptx" class="sr-only"
               data-admin--slidia-templates-target="fileInput"
               data-action="change->admin--slidia-templates#onFileSelected">
        <span class="w-11 h-11 rounded-xl flex items-center justify-center shrink-0"
              style="background: rgba({{ sdRgb }}, .12); color: {{ sdColor.primary }};">
            {% include '_atoms/icon/icon.html.twig' with { name: 'upload', size: 'md', color: 'current' } only %}
        </span>
        <span class="min-w-0">
            <span class="block text-sm font-bold text-gray-800" data-admin--slidia-templates-target="dropLabel">
                Glisser un .pptx ici, ou cliquer
            </span>
            <span class="block text-xs text-gray-400 mt-0.5">
                Le masque devient immédiatement disponible pour tous les comptes · 20 Mo max
            </span>
        </span>
    </label>

    <p class="text-sm text-red-600 mt-3 hidden" data-admin--slidia-templates-target="error"></p>

    {# ── Grille ─────────────────────────────────────────────────────────── #}
    <div class="flex items-center gap-3 mt-10 mb-5">
        <span class="inline-flex items-center justify-center min-w-[32px] h-8 px-3 rounded-full text-sm font-bold text-white"
              style="background: {{ sdColor.primary }};">{{ masques|length }}</span>
        <span class="text-gray-500">masque{{ masques|length > 1 ? 's' : '' }} officiel{{ masques|length > 1 ? 's' : '' }}</span>
    </div>

    {% if masques is empty %}
        <div class="rounded-2xl border border-dashed border-gray-200 bg-gray-50/60 py-14 px-6 text-center">
            <p class="text-sm font-semibold text-gray-700">Aucun masque officiel</p>
            <p class="text-xs text-gray-400 mt-1.5">
                Tant qu'il n'y en a aucun, la création Slidia n'a rien à proposer : elle exige un masque.
            </p>
        </div>
    {% else %}
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
            {% for masque in masques %}
                {% set usage = usages[masque.id] ?? 0 %}
                <div class="adm-card" data-masque-id="{{ masque.id }}">
                    <div class="adm-card__preview">
                        {% if masque.isThumbnailsReady %}
                            <img src="{{ path('api_slidia_template_thumbnail', { id: masque.id, n: 0 }) }}"
                                 alt="Aperçu du masque {{ masque.name }}" loading="lazy">
                        {% endif %}
                    </div>

                    <div class="px-4 py-3.5">
                        <p class="text-sm font-bold text-gray-900 truncate" data-masque-name>{{ masque.name }}</p>
                        <p class="text-xs text-gray-400 mt-0.5">
                            {{ masque.layouts|length }} mise{{ masque.layouts|length > 1 ? 's' : '' }} en page
                            {%- if usage > 0 %} · {{ usage }} présentation{{ usage > 1 ? 's' : '' }}{% endif -%}
                        </p>

                        <div class="flex items-center gap-2 mt-3.5">
                            <button type="button"
                                    class="inline-flex items-center gap-1.5 h-8 px-3 rounded-full text-xs font-semibold text-gray-500 border border-gray-200 hover:border-gray-300 hover:text-gray-700 transition-all cursor-pointer"
                                    data-action="click->admin--slidia-templates#openRename"
                                    data-masque-id="{{ masque.id }}"
                                    data-masque-name="{{ masque.name }}">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'edit', size: 'xs', color: 'current' } only %}
                                Renommer
                            </button>

                            {# Un masque encore employé n'est pas supprimable : les présentations
                               qui s'appuient dessus perdraient leurs mises en page. Le bouton le
                               dit avant le clic plutôt que d'échouer après. #}
                            <button type="button"
                                    class="inline-flex items-center gap-1.5 h-8 px-3 rounded-full text-xs font-semibold transition-all
                                           {{ usage > 0
                                              ? 'text-gray-300 border border-gray-100 cursor-not-allowed'
                                              : 'text-red-400 border border-red-100 hover:border-red-200 hover:text-red-600 hover:bg-red-50 cursor-pointer' }}"
                                    {% if usage > 0 %}disabled title="{{ usage }} présentation{{ usage > 1 ? 's' : '' }} utilise{{ usage > 1 ? 'nt' : '' }} encore ce masque"{% endif %}
                                    data-action="click->admin--slidia-templates#openDelete"
                                    data-masque-id="{{ masque.id }}"
                                    data-masque-name="{{ masque.name }}">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'trash', size: 'xs', color: 'current' } only %}
                                Supprimer
                            </button>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    {% endif %}

    {# ── Modales ────────────────────────────────────────────────────────── #}
    {% embed '_organisms/rename-modal/rename-modal.html.twig' with {
        title:       'Renommer le masque',
        subtitle:    'Ce nom est celui que verront tous les utilisateurs.',
        placeholder: 'Nom du masque',
        hint:        'Max. 20 caractères',
        color:       sdColor,
        modalAttr:   {'data-admin--slidia-templates-target': 'renameModal'},
        inputAttr:   {
            'data-admin--slidia-templates-target': 'renameInput',
            'data-action': 'keydown.enter->admin--slidia-templates#confirmRename keydown.escape->admin--slidia-templates#closeRename',
            'maxlength': '20'
        },
        cancelAttr:  {'data-action': 'click->admin--slidia-templates#closeRename'},
        confirmAttr: {'data-action': 'click->admin--slidia-templates#confirmRename'}
    } only %}{% endembed %}

    {% embed '_organisms/delete-modal/delete-modal.html.twig' with {
        title:       'Supprimer ce masque officiel ?',
        modalAttr:   {'data-admin--slidia-templates-target': 'deleteModal', 'data-action': 'keydown.esc@window->admin--slidia-templates#closeDelete'},
        cancelAttr:  {'data-action': 'click->admin--slidia-templates#closeDelete'},
        confirmAttr: {'data-action': 'click->admin--slidia-templates#confirmDelete'}
    } only %}
        {% block description %}
            <p class="text-sm text-gray-500">
                <strong class="text-gray-900 font-semibold" data-admin--slidia-templates-target="deleteName"></strong>
                sera retiré de l'offre pour tous les comptes. Cette action est irréversible.
            </p>
        {% endblock %}
    {% endembed %}
</div>
{% endblock %}