{# Etichette UI che cambiano in base al modello della sezione (colturale/animale). #}

{% macro elemento_label(modello) %}{{ modello == 'animale' ? 'Tipo animale' : 'Coltivazione' }}{% endmacro %}
{% macro elementi_label(modello) %}{{ modello == 'animale' ? 'Tipi animale' : 'Coltivazioni' }}{% endmacro %}
{% macro variante_label(modello) %}{{ modello == 'animale' ? 'Razza' : 'Varietà' }}{% endmacro %}
{% macro varianti_label(modello) %}{{ modello == 'animale' ? 'Razze' : 'Varietà' }}{% endmacro %}

{# Galleria foto masonry in CSS puro (niente JS), via CSS columns di Tailwind.
   Layout: contenitore columns-2 md:columns-3 lg:columns-4 — 2 colonne su smartphone,
   più colonne su schermi larghi; si adatta automaticamente al resize. Ogni foto è in un
   wrapper break-inside-avoid (non si spezza tra le colonne). Le immagini sono mostrate
   intere (w-full h-auto, niente crop/object-cover/aspect-*) mantenendo l'aspect naturale,
   così si vedono senza aprirle; il click sull'immagine resta opzionale per ingrandire.

   IMPORTANTE: questa macro NON emette MAI un <form>, così può essere usata anche dentro
   un altro <form> senza rischio di form annidati (HTML invalido che rompe il submit).
   delete_mode controlla la rimozione:
   - 'mark' : checkbox `rimuovi_foto[]`, parte del form principale che racchiude la galleria;
              la cancellazione avviene nel submit di quel form. USARE dentro un <form>.
   - 'live' : pulsante type="button" che chiama via fetch/JS la rotta /allegati/{id}/elimina
              (helper globale ortoEliminaAllegato nel layout). Per viste di dettaglio (show/timeline).
   - falsy  : sola visualizzazione. #}
{% macro foto_thumbs(allegati, delete_mode) %}
    {% if allegati is not empty %}
        <div class="columns-2 md:columns-3 lg:columns-4 gap-3">
            {% for a in allegati %}
                <div class="relative mb-3 break-inside-avoid" data-allegato-tile>
                    <a href="{{ url('/allegati/' ~ a.id) }}" target="_blank" rel="noopener noreferrer" title="{{ a.nome_originale }}">
                        <img src="{{ url('/allegati/' ~ a.id) }}" alt="{{ a.nome_originale }}" loading="lazy"
                             class="w-full h-auto rounded-lg border border-stone-200 dark:border-stone-700">
                    </a>
                    {% if delete_mode == 'mark' %}
                        {# Checkbox di rimozione: inviato col form principale, NIENTE form annidato.
                           Spunta = foto segnata, verrà eliminata al salvataggio. #}
                        <label title="Segna per rimuovere al salvataggio"
                               class="absolute right-1 top-1 flex h-6 w-6 cursor-pointer items-center justify-center rounded-full bg-black/60 text-xs leading-none text-white hover:bg-black/80 has-[:checked]:bg-red-600">
                            <input type="checkbox" name="rimuovi_foto[]" value="{{ a.id }}" class="peer sr-only">
                            <span class="peer-checked:hidden">✕</span>
                            <span class="hidden peer-checked:inline">↺</span>
                        </label>
                    {% elseif delete_mode == 'live' %}
                        {# Pulsante (non submit) che elimina via fetch: nessun <form>, nessun annidamento. #}
                        <button type="button" title="Elimina foto"
                                onclick="ortoEliminaAllegato(this, '{{ url('/allegati/' ~ a.id ~ '/elimina') }}')"
                                class="absolute right-1 top-1 flex h-6 w-6 items-center justify-center rounded-full bg-black/60 text-xs leading-none text-white hover:bg-black/80">✕</button>
                    {% endif %}
                </div>
            {% endfor %}
        </div>
    {% endif %}
{% endmacro %}