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

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

{% block content %}
    <div class="flex items-center justify-between gap-4">
        <h1>Luoghi</h1>
        <a class="btn-primary" href="{{ url('/luoghi/nuovo') }}">+ Nuovo luogo</a>
    </div>

    {% if luoghi is empty %}
        <p class="mt-4 text-stone-500">Nessun luogo configurato. Creane uno 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>Ambito</th><th>Note</th><th>Azioni</th></tr>
                </thead>
                <tbody>
                    {% for l in luoghi %}
                        <tr>
                            <td class="font-medium" data-label="Nome">{{ l.nome }}</td>
                            <td data-label="Ambito"><span class="badge">{{ l.ambito }}</span></td>
                            <td class="text-stone-500" data-label="Note">
                                {{ l.note ? (l.note|length > 80 ? l.note|slice(0, 80) ~ '…' : l.note) : '—' }}
                            </td>
                            <td class="cell-actions">
                                <div class="flex flex-wrap gap-2">
                                    <a class="btn-secondary" href="{{ url('/luoghi/' ~ l.id ~ '/modifica') }}">Modifica</a>
                                    <form method="post" action="{{ url('/luoghi/' ~ l.id ~ '/elimina') }}"
                                          onsubmit="return confirm('Eliminare il luogo “{{ l.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 %}