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

{% block title %}{{ is_edit ? 'Modifica' : 'Nuova' }} attività · {{ app_name }}{% endblock %}

{% block content %}
    <div class="mx-auto max-w-lg">
        <p class="text-sm text-stone-500">
            <a href="{{ url('/elementi/' ~ elemento.id) }}">{{ elemento.nome }}</a> / Attività
        </p>
        <h1 class="mt-1">{{ is_edit ? 'Modifica attività' : 'Nuova attività' }}</h1>

        <form method="post" action="{{ action }}" class="card mt-4"
              x-data="{ tipo: '{{ a.tipo_attivita_id ? a.tipo_attivita_id : (a.is_altro ? 'altro' : '0') }}' }">
            {{ csrf_field() }}

            <div class="field">
                <label class="label" for="tipo_attivita_id">Tipo di attività</label>
                <select class="select" id="tipo_attivita_id" name="tipo_attivita_id" x-model="tipo">
                    <option value="0">— seleziona —</option>
                    {% for t in tipi %}
                        <option value="{{ t.id }}">{{ t.nome }}</option>
                    {% endfor %}
                    <option value="altro">Altro… (nome personalizzato)</option>
                </select>
                {% if errors.nome %}<p class="mt-1 text-sm text-red-600">{{ errors.nome }}</p>{% endif %}
            </div>

            <div class="field" x-show="tipo === 'altro'">
                <label class="label" for="nome_custom">Nome personalizzato</label>
                <input class="input" id="nome_custom" name="nome_custom" value="{{ a.nome_custom }}" maxlength="150"
                       x-bind:required="tipo === 'altro'"
                       placeholder="{{ elemento.sezione_modello == 'animale' ? 'Es. Incubazione, Schiusa' : 'Es. Semenzaio, Trapianto' }}">
            </div>

            <div class="field">
                <label class="label" for="ordine">Ordine</label>
                <input class="input" type="number" inputmode="numeric" id="ordine" name="ordine" value="{{ a.ordine }}" min="0" step="1">
                {% if errors.ordine %}<p class="mt-1 text-sm text-red-600">{{ errors.ordine }}</p>{% endif %}
                <p class="help">Determina l'ordine di visualizzazione nel calendario.</p>
            </div>

            <div class="field">
                <label class="label" for="note">Note <span class="text-stone-400">(opzionale)</span></label>
                <textarea class="textarea" id="note" name="note" rows="3">{{ a.note }}</textarea>
            </div>

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