{% extends "layout.html.twig" %}

{% block title %}Sezioni · {{ app_name }}{% endblock %}

{% block content %}
    <div class="flex items-center justify-between gap-4">
        <h1>Sezioni</h1>
        <a class="btn-primary" href="{{ url('/sezioni/nuova') }}">+ Nuova sezione</a>
    </div>

    {% if sezioni is empty %}
        <p class="mt-4 text-stone-500">Nessuna sezione configurata. Creane una con il pulsante qui sopra.</p>
    {% else %}
        <div class="card mt-4 overflow-x-auto">
            <table class="table table-cards">
                <thead>
                    <tr>
                        <th>Nome</th><th>Modello</th><th>Colore</th><th>Ordine</th><th>Attiva</th><th>Azioni</th>
                    </tr>
                </thead>
                <tbody>
                    {% for s in sezioni %}
                        <tr>
                            <td class="font-medium" data-label="Nome">{{ s.nome }}</td>
                            <td data-label="Modello"><span class="badge">{{ s.modello }}</span></td>
                            <td data-label="Colore">
                                {% if s.colore %}
                                    <span class="inline-flex items-center gap-2">
                                        <span class="inline-block h-4 w-4 rounded-full border border-stone-300"
                                              style="background: {{ s.colore }}"></span>
                                        <span class="text-xs text-stone-500">{{ s.colore }}</span>
                                    </span>
                                {% else %}
                                    <span class="text-stone-400">—</span>
                                {% endif %}
                            </td>
                            <td data-label="Ordine">{{ s.ordine }}</td>
                            <td data-label="Attiva">
                                {% if s.attiva %}<span class="badge">sì</span>
                                {% else %}<span class="text-stone-400">no</span>{% endif %}
                            </td>
                            <td class="cell-actions">
                                <div class="flex flex-wrap gap-2">
                                    <a class="btn-secondary" href="{{ url('/sezioni/' ~ s.id ~ '/modifica') }}">Modifica</a>
                                    <form method="post" action="{{ url('/sezioni/' ~ s.id ~ '/elimina') }}"
                                          onsubmit="return confirm('Eliminare la sezione “{{ s.nome|e('js') }}”? L\'operazione non è reversibile.')">
                                        {{ csrf_field() }}
                                        <button type="submit" class="btn-danger">Elimina</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}