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

{% block title %}{{ is_edit ? 'Modifica' : 'Nuovo' }} elemento · {{ app_name }}{% endblock %}

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

{# Modello iniziale: dalla sezione selezionata, altrimenti dalla prima sezione. #}
{% set initial_modello = '' %}
{% for s in sezioni %}{% if s.id == e.sezione_id %}{% set initial_modello = s.modello %}{% endif %}{% endfor %}
{% if initial_modello == '' and sezioni|length %}{% set initial_modello = sezioni[0].modello %}{% endif %}

{% block content %}
    <div class="mx-auto max-w-lg" x-data="{ modello: '{{ initial_modello }}' }">
        {% if sezioni is empty %}
            <h1>Nuovo elemento</h1>
            <div class="flash flash-warning mt-4">
                Nessuna sezione disponibile. Crea prima una sezione.
            </div>
        {% else %}
            <h1>
                <span x-text="modello === 'animale'
                    ? '{{ is_edit ? 'Modifica tipo animale' : 'Nuovo tipo animale' }}'
                    : '{{ is_edit ? 'Modifica coltivazione' : 'Nuova coltivazione' }}'"></span>
            </h1>

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

                <div class="field">
                    <label class="label" for="sezione_id">Sezione</label>
                    <select class="select" id="sezione_id" name="sezione_id"
                            @change="modello = $event.target.selectedOptions[0].dataset.modello">
                        {% for s in sezioni %}
                            <option value="{{ s.id }}" data-modello="{{ s.modello }}"
                                    {{ s.id == e.sezione_id ? 'selected' : '' }}>
                                {{ s.nome }} ({{ s.modello }})
                            </option>
                        {% endfor %}
                    </select>
                    {% if errors.sezione_id %}<p class="mt-1 text-sm text-red-600">{{ errors.sezione_id }}</p>{% endif %}
                </div>

                <div class="field">
                    <label class="label" for="nome">
                        Nome <span class="text-stone-400" x-text="'(' + (modello === 'animale' ? 'tipo animale' : 'coltivazione') + ')'"></span>
                    </label>
                    <input class="input" id="nome" name="nome" value="{{ e.nome }}" required maxlength="150" autofocus
                           x-bind:placeholder="modello === 'animale' ? 'Es. Galline, Quaglie, Api' : 'Es. Pomodori, Zucchine'">
                    {% if errors.nome %}<p class="mt-1 text-sm text-red-600">{{ errors.nome }}</p>{% endif %}
                </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">{{ e.note }}</textarea>
                </div>

                <div class="field">
                    <label class="label" for="foto">Foto <span class="text-stone-400">(immagini, max 8 MB ciascuna)</span></label>
                    {% if is_edit and allegati is not empty %}
                        <div class="mb-2">{{ lbl.foto_thumbs(allegati, can_write ? 'mark' : false) }}</div>
                        <p class="mb-2 text-xs text-stone-400">Tocca la ✕ su una foto per segnarla; verrà rimossa al salvataggio.</p>
                    {% endif %}
                    {# accept=image/* + multiple senza 'capture': su mobile il browser propone sia fotocamera sia galleria. #}
                    <input class="input" type="file" id="foto" name="foto[]" accept="image/*" multiple>
                </div>

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