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

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

{% block content %}
    <div class="mx-auto max-w-lg">
        <h1>{{ is_edit ? 'Modifica sezione' : 'Nuova sezione' }}</h1>

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

            <div class="field">
                <label class="label" for="nome">Nome</label>
                <input class="input" id="nome" name="nome" value="{{ s.nome }}" required maxlength="100" autofocus>
                {% if errors.nome %}<p class="mt-1 text-sm text-red-600">{{ errors.nome }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="modello">Modello</label>
                <select class="select" id="modello" name="modello">
                    <option value="colturale" {{ s.modello == 'colturale' ? 'selected' : '' }}>Colturale (orto / piante)</option>
                    <option value="animale" {{ s.modello == 'animale' ? 'selected' : '' }}>Animale</option>
                </select>
                {% if errors.modello %}<p class="mt-1 text-sm text-red-600">{{ errors.modello }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="label" for="colore">Colore <span class="text-stone-400">(opzionale)</span></label>
                <input class="input" id="colore" name="colore" value="{{ s.colore }}" maxlength="20" placeholder="#16a34a">
                {% if errors.colore %}<p class="mt-1 text-sm text-red-600">{{ errors.colore }}</p>{% endif %}
                <p class="help">Es. <code>#16a34a</code> o un nome colore CSS. Usato per il badge nel calendario.</p>
            </div>

            <div class="field">
                <label class="label" for="ordine">Ordine</label>
                <input class="input" type="number" inputmode="numeric" id="ordine" name="ordine" value="{{ s.ordine }}" min="0" step="1">
                {% if errors.ordine %}<p class="mt-1 text-sm text-red-600">{{ errors.ordine }}</p>{% endif %}
            </div>

            <div class="field">
                <label class="check-row">
                    <input type="checkbox" name="attiva" value="1" {{ s.attiva ? 'checked' : '' }}>
                    <span class="text-sm">Attiva</span>
                </label>
            </div>

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