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

{% block title %}Articles — Admin{% endblock %}
{% block page_title %}Articles de blog{% endblock %}
{% block page_subtitle %}{{ articles|length }} article{{ articles|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">Articles</span>
</nav>

{# ── 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="article-search" aria-label="Rechercher un article">
        </div>
        <select class="adm-filter-sel" id="article-category-filter" aria-label="Filtrer par catégorie">
            <option value="">Toutes les catégories</option>
            {% for cat in ['Moteurs', 'Pompes', 'Réducteurs', 'Maintenance', 'Fournitures'] %}
                <option value="{{ cat }}">{{ cat }}</option>
            {% endfor %}
        </select>
        <select class="adm-filter-sel" id="article-status-filter" aria-label="Filtrer par statut">
            <option value="">Tous les statuts</option>
            <option value="published">Publiés</option>
            <option value="draft">Brouillons</option>
        </select>
        <button type="button" class="adm-btn adm-btn-g adm-btn-sm" id="article-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="article-count">{{ articles|length }} article{{ articles|length > 1 ? 's' : '' }}</span>
        <div style="display:flex;gap:4px">
            <button type="button" class="adm-sort-btn active" data-sort="date">Date</button>
            <button type="button" class="adm-sort-btn" data-sort="name">Titre A→Z</button>
        </div>
        <div style="display:flex;gap:6px;margin-left:auto">
            <a href="{{ path('app_admin_article_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>
                Nouvel article
            </a>
        </div>
    </div>
</div>

{% if articles|length == 0 %}
<div class="adm-card" style="padding:40px;text-align:center;color:var(--muted);position:relative;z-index:1">
    <p>Aucun article.</p>
</div>
{% else %}

{# ── Table ── #}
<div class="adm-card adm-crud-card">
    <div class="adm-crud-header">
        <span class="adm-sh-title">Tous les articles</span>
    </div>
    <div class="adm-crud-wrap">
        <table>
            <thead>
                <tr>
                    <th>Titre</th>
                    <th>Catégorie</th>
                    <th>Date</th>
                    <th>Statut</th>
                    <th style="width:140px;text-align:right">Actions</th>
                </tr>
            </thead>
            <tbody id="article-list">
            {% for article in articles %}
                <tr data-name="{{ article.title|lower }}"
                    data-category="{{ article.category }}"
                    data-published="{{ article.isPublished ? '1' : '0' }}"
                    data-date="{{ article.publishedAt|date('Y-m-d') }}">
                    <td>
                        <a href="{{ path('app_admin_article_show', {uuid: article.uuid}) }}" style="font-weight:500;color:var(--text);text-decoration:none">
                            {{ article.title }}
                        </a>
                        <div style="font-size:.72rem;color:var(--muted);margin-top:2px">/blog/{{ article.slug }}/</div>
                    </td>
                    <td>
                        <span class="adm-pill adm-pill-trial">{{ article.category }}</span>
                    </td>
                    <td style="white-space:nowrap">{{ article.publishedAt|date('d/m/Y') }}</td>
                    <td>
                        <label class="adm-toggle-wrap adm-social-toggle" title="{{ article.isPublished ? 'Dépublier' : 'Publier' }}">
                            <input type="checkbox" class="adm-toggle-input js-article-toggle"
                                   data-toggle-url="{{ path('app_admin_article_toggle', {uuid: article.uuid}) }}"
                                   data-toggle-token="{{ csrf_token('toggle-article-' ~ article.uuid) }}"
                                   {% if article.isPublished %}checked{% endif %}
                                   aria-label="{{ article.isPublished ? 'Publié — cliquer pour dépublier' : 'Brouillon — cliquer pour publier' }}">
                            <span class="adm-toggle-slider"></span>
                        </label>
                    </td>
                    <td>
                        <div style="display:flex;gap:4px;justify-content:flex-end">
                            <a href="{{ path('app_admin_article_show', {uuid: article.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>
                            <a href="{{ path('app_admin_article_edit', {uuid: article.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>
                            <a href="/blog/{{ article.slug }}/" target="_blank" rel="noopener"
                               class="adm-act-btn" title="Voir sur le site" aria-label="Voir sur le site">
                                <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>
                            <button type="button" class="adm-act-btn del"
                                    data-delete-id="{{ article.uuid }}"
                                    data-delete-name="{{ article.title|e('html_attr') }}"
                                    data-delete-url="{{ path('app_admin_article_delete', {uuid: article.uuid}) }}"
                                    data-delete-token="{{ csrf_token('delete-article-' ~ article.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>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div id="article-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> ?<br>
        <small style="color:var(--muted)">Cette action est irréversible.</small></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-article-list.js') }}"></script>
{% endblock %}