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

{# Reuses the .adm-social-* structural classes from admin.css (same row layout,
   drag handle, toggle, actions) so the marques list looks and behaves exactly
   like the social networks list. #}

{% block title %}Marques partenaires — Admin{% endblock %}
{% block page_title %}Marques partenaires{% endblock %}
{% block page_subtitle %}{{ items|length }} marque{{ items|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>
    <span class="adm-bc-current">Marques partenaires</span>
</nav>

{% if tableMissing|default(false) %}
<div class="adm-card" style="padding:24px;margin-bottom:16px;border-left:4px solid #f59e0b;background:#fffbeb;position:relative;z-index:1">
    <h3 style="margin:0 0 8px;font-size:1rem;color:#92400e">⚠️ Migration de la table <code>marque</code> requise</h3>
    <p style="margin:0 0 12px;color:#78350f;font-size:0.9375rem">
        La table <code>marque</code> n'existe pas encore dans la base de données. Lance les commandes suivantes dans l'ordre :
    </p>
    <pre style="background:#1f2937;color:#f9fafb;padding:14px 16px;border-radius:6px;font-size:0.8125rem;line-height:1.6;overflow-x:auto;margin:0"><span style="color:#9ca3af"># 1. Générer le fichier de migration</span>
php bin/console make:migration

<span style="color:#9ca3af"># 2. Appliquer la migration</span>
php bin/console doctrine:migrations:migrate --no-interaction

<span style="color:#9ca3af"># 3. Charger les 16 marques placeholder</span>
php bin/console doctrine:fixtures:load --no-interaction

<span style="color:#9ca3af"># 4. Cache clear</span>
php bin/console cache:clear</pre>
</div>
{% else %}

{# ── Filters ── #}
<div class="adm-card adm-filters-card">
    <div class="adm-filters-row">
        <div class="adm-filter-search">
            <svg viewBox="0 0 24 24" stroke-width="1.8"><circle cx="11" cy="11" r="8"/><path d="M21 21l-4.35-4.35"/></svg>
            <input type="text" placeholder="Rechercher…" id="marque-search" aria-label="Rechercher une marque">
        </div>
        <select class="adm-filter-sel" id="marque-status-filter">
            <option value="">Toutes</option>
            <option value="active">Affichées</option>
            <option value="inactive">Masquées</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="marque-reset-filters" style="display:none">
            <svg viewBox="0 0 24 24" style="margin-right:4px"><polyline points="1 4 1 10 7 10"/><path d="M3.51 15a9 9 0 1 0 .49-4.95"/></svg>
            Réinitialiser
        </button>
    </div>
    <div class="adm-filters-meta">
        <span id="marque-count">{{ items|length }} marque{{ items|length > 1 ? 's' : '' }}</span>
        <div style="display:flex;gap:4px">
            <button type="button" class="adm-sort-btn active" data-sort="position">Position</button>
            <button type="button" class="adm-sort-btn" data-sort="name">Nom A→Z</button>
        </div>
        {% if is_granted('ROLE_ADMIN') %}
        <div style="display:flex;gap:6px;margin-left:auto">
            {% if items|length > 0 %}
            {% if is_granted('ROLE_SUPER_ADMIN') %}
            <a href="{{ path('app_admin_marque_export_sql') }}" class="adm-btn adm-btn-g adm-btn-sm">
                <svg viewBox="0 0 24 24" style="margin-right:4px"><path d="M4 7V4a2 2 0 0 1 2-2h8.5L20 7.5V20a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-3"/><polyline points="14 2 14 8 20 8"/><path d="M4 15h9"/><polyline points="10 12 7 15 10 18"/></svg>
                SQL
            </a>
            {% endif %}
            <a href="{{ path('app_admin_marque_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>
                CSV
            </a>
            {% endif %}
            <a href="{{ path('app_admin_marque_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
            </a>
        </div>
        {% endif %}
    </div>
</div>

{% if items|length == 0 %}
<div class="adm-card" style="padding:40px;text-align:center;color:var(--muted);position:relative;z-index:1">
    <p>Aucune marque configurée.</p>
</div>
{% else %}
<div class="adm-card" style="padding:0;overflow:visible">
    <ul class="adm-social-list" id="marque-list" data-reorder-url="{{ path('app_admin_marque_reorder') }}">
        {% for item in items %}
        <li class="adm-social-item{% if not item.isActive %} adm-social-item--inactive{% endif %}"
            data-id="{{ item.uuid }}"
            data-name="{{ item.name|lower }}"
            data-active="{{ item.isActive ? '1' : '0' }}"
            data-position="{{ item.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-icon">
                {% if item.logoPath %}
                    <img src="{{ asset(item.logoPath) }}" alt="{{ item.name }}">
                {% else %}
                    <svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
                {% endif %}
            </div>
            <div class="adm-social-info">
                <span class="adm-social-title">
                    {{ item.name }}
                    {% if item.category %}<span style="font-weight:400;font-size:.74rem;color:var(--muted);margin-left:6px">· {{ item.category }}</span>{% endif %}
                </span>
                {% if item.websiteUrl %}
                <a href="{{ item.websiteUrl }}" target="_blank" rel="noopener" class="adm-social-url adm-social-link">
                    {{ item.websiteUrl }}
                    <svg viewBox="0 0 24 24"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
                </a>
                {% else %}
                <span class="adm-social-url" style="color:var(--muted)">Pas de site web</span>
                {% endif %}
            </div>
            {% if is_granted('ROLE_ADMIN') %}
            <label class="adm-toggle-wrap adm-social-toggle" title="{{ item.isActive ? 'Masquer' : 'Afficher' }}">
                <input type="checkbox" class="adm-toggle-input adm-social-switch"
                       data-toggle-url="{{ path('app_admin_marque_toggle', {uuid: item.uuid}) }}"
                       data-toggle-token="{{ csrf_token('toggle-' ~ item.uuid) }}"
                       {% if item.isActive %}checked{% endif %}>
                <span class="adm-toggle-slider"></span>
            </label>
            {% endif %}
            <div class="adm-social-actions">
                <a href="{{ path('app_admin_marque_show', {uuid: item.uuid}) }}" class="adm-act-btn" title="Voir la fiche" aria-label="Voir la fiche">
                    <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_marque_edit', {uuid: item.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-id="{{ item.uuid }}"
                        data-delete-name="{{ item.name }}"
                        data-delete-url="{{ path('app_admin_marque_delete', {uuid: item.uuid}) }}"
                        data-delete-token="{{ csrf_token('delete-' ~ item.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 %}
            </div>
        </li>
        {% endfor %}
    </ul>
    <div class="adm-social-empty" id="marque-no-results" style="display:none;padding:30px;text-align:center;color:var(--muted);font-size:.85rem;position:relative;z-index:1">
        Aucun résultat trouvé.
    </div>
</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 <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>
{% endif %}

{% endif %}

{% endblock %}

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