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

{% set vlabel = lbl.variante_label(attivita.sezione_modello) %}

{% block title %}{{ is_edit ? 'Modifica' : 'Nuova' }} voce di storico · {{ app_name }}{% endblock %}

{% block content %}
    <div class="mx-auto max-w-lg">
        <p class="text-sm text-stone-500">
            <a href="{{ url('/attivita/' ~ attivita.id ~ '/calendario') }}">{{ attivita.nome }}</a> / Storico
        </p>
        <h1 class="mt-1">{{ is_edit ? 'Modifica voce di storico' : 'Nuova voce di storico' }}</h1>

        <form method="post" action="{{ action }}" class="card mt-4">
            {{ csrf_field() }}

            <div class="grid gap-4 sm:grid-cols-2">
                <div class="field">
                    <label class="label" for="anno">Anno</label>
                    <input class="input" type="number" inputmode="numeric" id="anno" name="anno" value="{{ s.anno }}" required min="1900" max="2200">
                    {% if errors.anno %}<p class="mt-1 text-sm text-red-600">{{ errors.anno }}</p>{% endif %}
                </div>
                <div class="field">
                    <label class="label" for="data">Data <span class="text-stone-400">(opzionale)</span></label>
                    <input class="input" type="date" id="data" name="data" value="{{ s.data }}">
                    {% if errors.data %}<p class="mt-1 text-sm text-red-600">{{ errors.data }}</p>{% endif %}
                </div>
            </div>

            {% if attivita.sezione_modello == 'animale' %}
            <div class="field">
                <label class="label" for="variante_id">{{ vlabel }} <span class="text-stone-400">(opzionale)</span></label>
                <select class="select" id="variante_id" name="variante_id">
                    <option value="0">— nessuna —</option>
                    {% for v in varianti %}
                        <option value="{{ v.id }}" {{ s.variante_id == v.id ? 'selected' : '' }}>{{ v.nome }}</option>
                    {% endfor %}
                </select>
                {% if errors.variante_id %}<p class="mt-1 text-sm text-red-600">{{ errors.variante_id }}</p>{% endif %}
            </div>
            {% endif %}

            <div class="field">
                <label class="label" for="luogo_id">Luogo <span class="text-stone-400">(opzionale)</span></label>
                <select class="select" id="luogo_id" name="luogo_id">
                    <option value="0">— nessuno —</option>
                    {% for l in luoghi %}
                        <option value="{{ l.id }}" {{ s.luogo_id == l.id ? 'selected' : '' }}>{{ l.nome }}</option>
                    {% endfor %}
                </select>
                {% if errors.luogo_id %}<p class="mt-1 text-sm text-red-600">{{ errors.luogo_id }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="origine">Origine <span class="text-stone-400">(opzionale)</span></label>
                <input class="input" id="origine" name="origine" value="{{ s.origine }}" maxlength="255"
                       placeholder="Origine seme/pianta usata quell'anno (se diversa)">
                {% if errors.origine %}<p class="mt-1 text-sm text-red-600">{{ errors.origine }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="esito">Esito</label>
                <textarea class="textarea" id="esito" name="esito" rows="4" required
                          placeholder="Cosa hai fatto e com'è andata: malattie, soluzioni, rese, note per gli anni successivi.">{{ s.esito }}</textarea>
                {% if errors.esito %}<p class="mt-1 text-sm text-red-600">{{ errors.esito }}</p>{% endif %}
            </div>

            <div class="flex gap-2 form-actions-sticky">
                <button type="submit" class="btn-primary">{{ is_edit ? 'Salva modifiche' : 'Aggiungi' }}</button>
                <a class="btn-secondary" href="{{ url('/attivita/' ~ attivita.id ~ '/calendario') }}">Annulla</a>
            </div>
        </form>
    </div>
{% endblock %}