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

{% block title %}Réseaux sociaux — Admin{% endblock %}
{% block page_title %}Réseaux sociaux{% endblock %}
{% block page_subtitle %}{{ items|length }} réseau{{ items|length > 1 ? 'x' : '' }}{% 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">Réseaux sociaux</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">Section réseaux sociaux</span>
        <span class="adm-toggle-hint" id="social-section-hint">
            {% if siteParams.socialNetworksEnabled %}
                <span style="color:var(--green);font-weight:500">Visible</span> dans le footer
            {% else %}
                <span style="color:var(--red);font-weight:500">Invisible</span> dans le footer
            {% endif %}
        </span>
    </span>
    <label class="adm-toggle-wrap">
        <input type="checkbox" class="adm-toggle-input" id="social-section-toggle"
               data-url="{{ path('app_admin_social_toggle_section') }}"
               data-token="{{ csrf_token('toggle-social-section') }}"
               {% if siteParams.socialNetworksEnabled %}checked{% endif %}>
        <span class="adm-toggle-slider"></span>
    </label>
</div>
{% endif %}

{# ── 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="social-search" aria-label="Rechercher un réseau social">
        </div>
        <select class="adm-filter-sel" id="social-status-filter">
            <option value="">Tous</option>
            <option value="active">Actifs</option>
            <option value="inactive">Inactifs</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="social-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="social-count">{{ items|length }} réseau{{ items|length > 1 ? 'x' : '' }}</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_social_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_social_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_social_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>Aucun réseau social configuré.</p>
</div>
{% else %}
<div class="adm-card" style="padding:0;overflow:visible">
    <ul class="adm-social-list" id="social-list" data-reorder-url="{{ path('app_admin_social_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.title|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.icon %}
                    <img src="{{ asset(item.icon) }}" alt="{{ item.title }}">
                {% else %}
                    <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/></svg>
                {% endif %}
            </div>
            <div class="adm-social-info">
                <span class="adm-social-title">{{ item.title }}</span>
                <a href="{{ item.url }}" target="_blank" rel="noopener" class="adm-social-url adm-social-link">
                    {{ item.url }}
                    <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>
            </div>
            {% if is_granted('ROLE_ADMIN') %}
            <label class="adm-toggle-wrap adm-social-toggle" title="{{ item.isActive ? 'Désactiver' : 'Activer' }}">
                <input type="checkbox" class="adm-toggle-input adm-social-switch"
                       data-toggle-url="{{ path('app_admin_social_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_social_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_social_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.title }}"
                        data-delete-url="{{ path('app_admin_social_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="social-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 %}

{% endblock %}

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