{% extends "layout.html.twig" %}
{% import "macros.twig" as lbl %}

{% block title %}Colture e animali · {{ app_name }}{% endblock %}

{% set can_write = current_user.ruolo in ['admin', 'editor'] %}

{% block content %}
    <div class="flex items-center justify-between gap-4">
        <h1>Colture e animali</h1>
        {% if can_write %}
            <a class="btn-primary" href="{{ url('/elementi/nuovo') }}">+ Nuova coltura/animale</a>
        {% endif %}
    </div>

    {% if groups is empty %}
        <p class="mt-4 text-stone-500">
            Nessuna sezione configurata.
            {% if current_user.ruolo == 'admin' %}
                Crea prima una <a href="{{ url('/sezioni') }}">sezione</a>.
            {% endif %}
        </p>
    {% endif %}

    {% for g in groups %}
        <section class="mt-6">
            <div class="flex items-center justify-between gap-4">
                <h2 class="flex items-center gap-2">
                    {{ g.sezione.nome }}
                    <span class="badge">{{ lbl.elementi_label(g.sezione.modello) }}</span>
                </h2>
                {% if can_write %}
                    <a class="btn-secondary" href="{{ url('/elementi/nuovo') }}?sezione_id={{ g.sezione.id }}">
                        + {{ lbl.elemento_label(g.sezione.modello) }}
                    </a>
                {% endif %}
            </div>

            {% if g.elementi is empty %}
                <p class="mt-2 text-sm text-stone-500">Nessun elemento in questa sezione.</p>
            {% else %}
                <div class="card mt-2 overflow-x-auto">
                    <table class="table table-cards">
                        <thead>
                            <tr><th>Nome</th><th>Note</th>{% if g.sezione.modello == 'animale' %}<th>{{ lbl.varianti_label(g.sezione.modello) }}</th>{% endif %}<th>Azioni</th></tr>
                        </thead>
                        <tbody>
                            {% for e in g.elementi %}
                                <tr>
                                    <td class="font-medium" data-label="Nome">
                                        <a href="{{ url('/elementi/' ~ e.id) }}">{{ e.nome }}</a>
                                    </td>
                                    <td class="text-stone-500" data-label="Note">
                                        {{ e.note ? (e.note|length > 80 ? e.note|slice(0, 80) ~ '…' : e.note) : '—' }}
                                    </td>
                                    {% if g.sezione.modello == 'animale' %}<td data-label="{{ lbl.varianti_label(g.sezione.modello) }}">{{ e.n_varianti }}</td>{% endif %}
                                    <td class="cell-actions">
                                        <div class="flex flex-wrap gap-2">
                                            <a class="btn-secondary" href="{{ url('/elementi/' ~ e.id) }}">Apri</a>
                                            {% if can_write %}
                                                <a class="btn-secondary" href="{{ url('/elementi/' ~ e.id ~ '/modifica') }}">Modifica</a>
                                                <form method="post" action="{{ url('/elementi/' ~ e.id ~ '/elimina') }}"
                                                      onsubmit="return confirm('Eliminare “{{ e.nome|e('js') }}”? Verranno rimosse anche le sue varianti e attività.')">
                                                    {{ csrf_field() }}
                                                    <button type="submit" class="btn-danger">Elimina</button>
                                                </form>
                                            {% endif %}
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </section>
    {% endfor %}
{% endblock %}