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

{% block title %}{{ category.name }} — Cookies — Admin{% endblock %}
{% block page_title %}{{ category.name }}{% endblock %}
{% block page_subtitle %}{{ category.cookies|length }} cookie{{ category.cookies|length > 1 ? 's' : '' }}{% 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>
    <a href="{{ path('app_admin_cookie_index') }}">Cookies RGPD</a>
    <span class="adm-bc-sep">›</span>
    <span class="adm-bc-current">{{ category.name }}</span>
</nav>

{# ── Category info ── #}
<div class="adm-card" style="padding:20px;position:relative;z-index:1;margin-bottom:12px">
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px">
        <div>
            <h3 style="font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:400;color:var(--text);margin-bottom:4px">{{ category.name }}</h3>
            {% if category.description %}<p style="font-size:.82rem;color:var(--muted);font-weight:300">{{ category.description }}</p>{% endif %}
            <div style="display:flex;gap:6px;margin-top:8px">
                {% if category.isRequired %}<span class="adm-pill adm-pill-active">Obligatoire</span>{% endif %}
                <span class="adm-pill {{ category.isEnabled ? 'adm-pill-active' : 'adm-pill-paused' }}">{{ category.isEnabled ? 'Activée' : 'Désactivée' }}</span>
                <span class="adm-pill adm-pill-trial">{{ category.slug }}</span>
            </div>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
        <div style="display:flex;gap:8px">
            <a href="{{ path('app_admin_cookie_category_edit', {uuid: category.uuid}) }}" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><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>
                Modifier
            </a>
            <a href="{{ path('app_admin_cookie_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>
                Ajouter un cookie
            </a>
        </div>
        {% endif %}
    </div>
</div>

{# ── Cookies list (drag & drop) ── #}
<div class="adm-card" style="padding:0;overflow:visible">
    {% if category.cookies|length == 0 %}
        <div style="padding:30px;text-align:center;color:var(--muted);position:relative;z-index:1">Aucun cookie dans cette catégorie.</div>
    {% else %}
    <ul class="adm-social-list" id="cookie-list" data-reorder-url="{{ path('app_admin_cookie_reorder_cookies') }}">
        {% for cookie in category.cookies %}
        <li class="adm-social-item{% if not cookie.isActive %} adm-social-item--inactive{% endif %}"
            data-id="{{ cookie.uuid }}" data-position="{{ cookie.position }}">
            {% 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">
                    <code style="font-size:.82rem;background:rgba(124,158,255,.08);padding:2px 6px;border-radius:4px">{{ cookie.name }}</code>
                    <span class="adm-pill adm-pill-trial" style="margin-left:6px;font-size:.5rem;vertical-align:middle">{{ cookie.cookieType|upper }}</span>
                </span>
                <span class="adm-social-url">{{ cookie.provider }} · {{ cookie.purpose }} · {{ cookie.duration }}</span>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
            <label class="adm-toggle-wrap adm-social-toggle">
                <input type="checkbox" class="adm-toggle-input adm-cookie-toggle"
                       data-url="{{ path('app_admin_cookie_toggle', {uuid: cookie.uuid}) }}"
                       data-token="{{ csrf_token('toggle-cookie-' ~ cookie.uuid) }}"
                       {% if cookie.isActive %}checked{% endif %}>
                <span class="adm-toggle-slider"></span>
            </label>
            <div class="adm-social-actions">
                <a href="{{ path('app_admin_cookie_edit', {uuid: cookie.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>
                <button type="button" class="adm-act-btn del"
                        data-delete-name="{{ cookie.name }}"
                        data-delete-url="{{ path('app_admin_cookie_delete', {uuid: cookie.uuid}) }}"
                        data-delete-token="{{ csrf_token('delete-cookie-' ~ cookie.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>
            </div>
            {% endif %}
        </li>
        {% endfor %}
    </ul>
    {% endif %}
</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 le cookie <strong id="adm-delete-name"></strong> ?</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>

{% endblock %}

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