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

{% block title %}{{ elemento.nome }} · {{ app_name }}{% endblock %}

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

{% block content %}
    <p class="text-sm text-stone-500">
        <a href="{{ url('/elementi') }}">Elementi</a> /
        {{ elemento.sezione_nome }}
    </p>

    <div class="mt-1 flex items-center justify-between gap-4">
        <h1 class="flex items-center gap-2">
            {{ elemento.nome }}
            <span class="badge">{{ lbl.elemento_label(modello) }}</span>
        </h1>
        <div class="flex flex-wrap gap-2">
            <a class="btn-secondary" href="{{ url('/elementi/' ~ elemento.id ~ '/pdf') }}" target="_blank" rel="noopener noreferrer">Esporta PDF</a>
            {% if can_write %}
                <a class="btn-secondary" href="{{ url('/elementi/' ~ elemento.id ~ '/modifica') }}">Modifica elemento</a>
            {% endif %}
        </div>
    </div>

    {% if elemento.note %}
        <p class="mt-2 text-stone-600">{{ elemento.note|nl2br }}</p>
    {% endif %}

    {# ── Foto ──────────────────────────────────────────────────── #}
    {% if allegati is not empty %}
        <div class="mt-4">
            <h2 class="sr-only">Foto</h2>
            {{ lbl.foto_thumbs(allegati, can_write ? 'live' : false) }}
        </div>
    {% endif %}

    {# ── Attività ──────────────────────────────────────────────── #}
    <div class="mt-6 flex items-center justify-between gap-4">
        <h2>Attività</h2>
        {% if can_write %}
            <a class="btn-primary" href="{{ url('/elementi/' ~ elemento.id ~ '/attivita/nuova') }}">+ Attività</a>
        {% endif %}
    </div>

    {% if attivita is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessuna attività registrata.</p>
    {% else %}
        <div class="card mt-2 overflow-x-auto">
            <table class="table table-cards">
                <thead>
                    <tr><th>Nome</th><th>Ordine</th><th>Settimane</th><th>Azioni</th></tr>
                </thead>
                <tbody>
                    {% for a in attivita %}
                        <tr>
                            <td class="font-medium" data-label="Nome">
                                <a href="{{ url('/attivita/' ~ a.id ~ '/calendario') }}">{{ a.nome }}</a>
                            </td>
                            <td data-label="Ordine">{{ a.ordine }}</td>
                            <td data-label="Settimane">
                                {% if a.n_settimane > 0 %}
                                    <span class="badge">{{ a.n_settimane }} colorate</span>
                                {% else %}
                                    <span class="text-stone-400">—</span>
                                {% endif %}
                            </td>
                            <td class="cell-actions">
                                <div class="flex flex-wrap gap-2">
                                    <a class="btn-secondary" href="{{ url('/attivita/' ~ a.id ~ '/calendario') }}">Calendario</a>
                                    {% if can_write %}
                                        <a class="btn-secondary" href="{{ url('/attivita/' ~ a.id ~ '/modifica') }}">Modifica</a>
                                        <form method="post" action="{{ url('/attivita/' ~ a.id ~ '/elimina') }}"
                                              onsubmit="return confirm('Eliminare l\'attività “{{ a.nome|e('js') }}”? Verrà rimosso anche il suo calendario.')">
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn-danger">Elimina</button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}

    {# ── Varianti (razze) — solo per il modello animale ──────────── #}
    {% if modello == 'animale' %}
    <div class="mt-8 flex items-center justify-between gap-4">
        <h2>{{ lbl.varianti_label(modello) }}</h2>
        {% if can_write %}
            <a class="btn-primary" href="{{ url('/elementi/' ~ elemento.id ~ '/varianti/nuova') }}">
                + {{ lbl.variante_label(modello) }}
            </a>
        {% endif %}
    </div>

    {% if varianti is empty %}
        <p class="mt-2 text-sm text-stone-500">Nessuna {{ lbl.variante_label(modello)|lower }} registrata.</p>
    {% else %}
        <div class="card mt-2 overflow-x-auto">
            <table class="table table-cards">
                <thead>
                    <tr><th>Nome</th><th>Origine</th><th>Venditore</th><th>Link</th><th>Note</th><th>Azioni</th></tr>
                </thead>
                <tbody>
                    {% for v in varianti %}
                        <tr>
                            <td class="font-medium" data-label="Nome">{{ v.nome }}</td>
                            <td class="text-stone-500" data-label="Origine">{{ v.origine ?: '—' }}</td>
                            <td class="text-stone-500" data-label="Venditore">{{ v.origine_venditore ?: '—' }}</td>
                            <td data-label="Link">
                                {% if v.origine_link %}
                                    <a href="{{ v.origine_link }}" target="_blank" rel="noopener noreferrer">apri ↗</a>
                                {% else %}—{% endif %}
                            </td>
                            <td class="text-stone-500" data-label="Note">
                                {{ v.note ? (v.note|length > 60 ? v.note|slice(0, 60) ~ '…' : v.note) : '—' }}
                            </td>
                            <td class="cell-actions">
                                <div class="flex flex-wrap gap-2">
                                    <a class="btn-secondary" href="{{ url('/varianti/' ~ v.id ~ '/pdf') }}" target="_blank" rel="noopener noreferrer">PDF</a>
                                    {% if can_write %}
                                        <a class="btn-secondary" href="{{ url('/varianti/' ~ v.id ~ '/modifica') }}">Modifica</a>
                                        <form method="post" action="{{ url('/varianti/' ~ v.id ~ '/elimina') }}"
                                              onsubmit="return confirm('Eliminare “{{ v.nome|e('js') }}”?')">
                                            {{ csrf_field() }}
                                            <button type="submit" class="btn-danger">Elimina</button>
                                        </form>
                                    {% endif %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    {% endif %}
    {% endif %}{# modello animale #}
{% endblock %}