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

{% block title %}Cookies RGPD — Admin{% endblock %}
{% block page_title %}Cookies RGPD{% endblock %}
{% block page_subtitle %}Gestion du consentement{% endblock %}

{% block admin_body %}

<nav class="adm-breadcrumb">
    <svg viewBox="0 0 24 24"><path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg>
    <a href="{{ path('app_admin') }}">Dashboard</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">Cookies RGPD</span>
</nav>

{% if is_granted('ROLE_ADMIN') %}
{# ── Global toggle ── #}
<div class="adm-card" style="padding:14px 20px;margin-bottom:8px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between">
    <span class="adm-toggle-info" style="margin:0">
        <span class="adm-toggle-label">Bannière cookies RGPD</span>
        <span class="adm-toggle-hint" id="cookie-consent-hint">
            {% if siteParams.cookieConsentEnabled %}
                <span style="color:var(--green);font-weight:500">Activée</span>
            {% else %}
                <span style="color:var(--red);font-weight:500">Désactivée</span>
            {% endif %}
        </span>
    </span>
    <label class="adm-toggle-wrap">
        <input type="checkbox" class="adm-toggle-input" id="cookie-consent-toggle"
               data-url="{{ path('app_admin_cookie_toggle_consent') }}"
               data-token="{{ csrf_token('toggle-cookie-consent') }}"
               {% if siteParams.cookieConsentEnabled %}checked{% endif %}>
        <span class="adm-toggle-slider"></span>
    </label>
</div>
{% endif %}

{% if is_granted('ROLE_ADMIN') %}
{# ── Actions bar ── #}
<div class="adm-card" style="padding:14px 20px;margin-bottom:8px;position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px">
    <div style="display:flex;gap:8px">
        <a href="{{ path('app_admin_cookie_category_new') }}" class="adm-btn adm-btn-p adm-btn-sm">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nouvelle catégorie
        </a>
        <a href="{{ path('app_admin_cookie_new') }}" class="adm-btn adm-btn-g adm-btn-sm">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
            Nouveau cookie
        </a>
    </div>
    <a href="{{ path('app_admin_cookie_export') }}" class="adm-btn adm-btn-g adm-btn-sm">
        <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
        Exporter CSV
    </a>
</div>
{% endif %}

{# ── Categories list ── #}
{% if categories|length == 0 %}
<div class="adm-card" style="padding:40px;text-align:center;color:var(--muted);position:relative;z-index:1">
    <p>Aucune catégorie de cookies configurée.</p>
</div>
{% else %}
<div class="adm-card" style="padding:0;overflow:visible">
    <ul class="adm-social-list" id="cookie-cat-list" data-reorder-url="{{ path('app_admin_cookie_reorder_categories') }}">
        {% for cat in categories %}
        <li class="adm-social-item{% if not cat.isEnabled %} adm-social-item--inactive{% endif %}"
            data-id="{{ cat.uuid }}" data-position="{{ cat.displayOrder }}">
            {% if is_granted('ROLE_ADMIN') %}
            <div class="adm-social-drag" title="Glisser pour réordonner">
                <svg viewBox="0 0 24 24"><circle cx="9" cy="5" r="1"/><circle cx="9" cy="12" r="1"/><circle cx="9" cy="19" r="1"/><circle cx="15" cy="5" r="1"/><circle cx="15" cy="12" r="1"/><circle cx="15" cy="19" r="1"/></svg>
            </div>
            {% endif %}
            <div class="adm-social-info">
                <span class="adm-social-title">
                    {{ cat.name }}
                    {% if cat.isRequired %}
                        <span class="adm-pill adm-pill-active" style="margin-left:6px;font-size:.55rem;vertical-align:middle">Obligatoire</span>
                    {% endif %}
                </span>
                <span class="adm-social-url">{{ cat.slug }} · {{ cat.cookies|length }} cookie{{ cat.cookies|length > 1 ? 's' : '' }}</span>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
            <label class="adm-toggle-wrap adm-social-toggle">
                <input type="checkbox" class="adm-toggle-input adm-cat-toggle"
                       data-url="{{ path('app_admin_cookie_category_toggle', {uuid: cat.uuid}) }}"
                       data-token="{{ csrf_token('toggle-cat-' ~ cat.uuid) }}"
                       {% if cat.isEnabled %}checked{% endif %}
                       {% if cat.isRequired %}disabled title="Toujours actif"{% endif %}>
                <span class="adm-toggle-slider"></span>
            </label>
            {% endif %}
            <div class="adm-social-actions">
                <a href="{{ path('app_admin_cookie_category_show', {uuid: cat.uuid}) }}" class="adm-act-btn" title="Détails" aria-label="Détails">
                    <svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                </a>
                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_admin_cookie_category_edit', {uuid: cat.uuid}) }}" class="adm-act-btn" title="Modifier" aria-label="Modifier">
                    <svg viewBox="0 0 24 24"><path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.12 2.12 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/></svg>
                </a>
                {% if not cat.isRequired %}
                <button type="button" class="adm-act-btn del"
                        data-delete-name="{{ cat.name }}"
                        data-delete-url="{{ path('app_admin_cookie_category_delete', {uuid: cat.uuid}) }}"
                        data-delete-token="{{ csrf_token('delete-cat-' ~ cat.uuid) }}"
                        title="Supprimer" aria-label="Supprimer">
                    <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
                </button>
                {% endif %}
                {% endif %}
            </div>
        </li>
        {% endfor %}
    </ul>
</div>

{# ── Delete modal ── #}
<div class="adm-modal-overlay" id="adm-delete-overlay">
    <div class="adm-modal" onclick="event.stopPropagation()">
        <div class="adm-modal-icon">
            <svg viewBox="0 0 24 24"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6M14 11v6"/></svg>
        </div>
        <h3>Confirmer la suppression</h3>
        <p>Supprimer la catégorie <strong id="adm-delete-name"></strong> et tous ses cookies ?</p>
        <div class="adm-modal-foot">
            <button class="adm-btn adm-btn-g" id="adm-delete-cancel">Annuler</button>
            <form id="adm-delete-form" method="post" style="display:inline">
                <input type="hidden" name="_token" id="adm-delete-token">
                <button type="submit" class="adm-btn adm-btn-red">Supprimer</button>
            </form>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}

{% block javascripts %}
{{ parent() }}
<script src="{{ asset('js/admin-cookie-list.js') }}"></script>
{% endblock %}