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

{% block title %}Categorie spese · {{ app_name }}{% endblock %}

{% block content %}
    <p class="text-sm text-stone-500"><a href="{{ url('/spese') }}">Spese</a> / Categorie</p>
    <div class="flex items-center justify-between gap-4">
        <h1>Categorie di spesa</h1>
        <a class="btn-primary" href="{{ url('/spese-categorie/nuova') }}">+ Nuova categoria</a>
    </div>

    {% if categorie is empty %}
        <p class="mt-4 text-stone-500">Nessuna categoria.</p>
    {% else %}
        <div class="card mt-4 overflow-x-auto">
            <table class="table table-cards">
                <thead><tr><th>Nome</th><th>Ordine</th><th>Attiva</th><th>Azioni</th></tr></thead>
                <tbody>
                    {% for c in categorie %}
                        <tr>
                            <td class="font-medium" data-label="Nome">{{ c.nome }}</td>
                            <td data-label="Ordine">{{ c.ordine }}</td>
                            <td data-label="Attiva">{% if c.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('/spese-categorie/' ~ c.id ~ '/modifica') }}">Modifica</a>
                                    <form method="post" action="{{ url('/spese-categorie/' ~ c.id ~ '/elimina') }}"
                                          onsubmit="return confirm('Eliminare la categoria “{{ c.nome|e('js') }}”?')">
                                        {{ csrf_field() }}<button type="submit" class="btn-danger">Elimina</button>
                                    </form>
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
{% endblock %}