{#
    Choix du style d'en-tête et de pied de page — grille de cartes.

    Autonome, sur le modèle de `admin/_widgets-catalog.html.twig` : les cartes
    sont générées depuis HeaderFooterPresetService. Elles étaient écrites à la
    main, quatorze blocs de HTML, dont les libellés avaient dérivé du catalogue
    et où le style « Classique » — celui de la quasi-totalité des sites —
    n'apparaissait pas, si bien qu'aucune carte n'était jamais allumée.

    Paramètres :
      form  FormView  Le formulaire des paramètres généraux (champs `headerPreset`
                      et `footerPreset`, masqués : la grille les pilote).
#}
{% set grilles = [
    {key: 'header', label: 'Menu du site (Header)', icon: 'fa-window-maximize', color: 'text-primary',
     presets: header_presets(), field: form.headerPreset, css: 'header-preset-input', cols: 'col-md-6'},
    {key: 'footer', label: 'Pied de page (Footer)', icon: 'fa-grip-lines', color: 'text-success',
     presets: footer_presets(), field: form.footerPreset, css: 'footer-preset-input', cols: 'col-md-4'}
] %}

{% for grille in grilles %}
    {% if not loop.first %}<hr class="my-5">{% endif %}
    <div{% if not loop.last %} class="mb-5"{% endif %}>
        <label class="form-label fw-semibold mb-3">
            <i class="fas {{ grille.icon }} me-2 {{ grille.color }}"></i>
            {{ grille.label }}
        </label>

        {# Champ réel du formulaire : la grille ci-dessous ne fait que le piloter. #}
        <div style="display: none;">
            {{ form_widget(grille.field, {'attr': {'class': grille.css}, 'label': false}) }}
        </div>

        <div class="preset-grid row g-3">
            {% for preset in grille.presets %}
                <div class="{{ grille.cols }} preset-item" data-preset-id="{{ preset.id }}">
                    <div class="preset-card">
                        <div class="preset-preview">
                            <img src="{{ asset(preset.preview) }}" alt="{{ preset.name }}" loading="lazy"
                                 onerror="this.src='{{ asset('assets/img/presets/' ~ grille.key ~ 's/placeholder.svg') }}'">
                            <div class="preset-overlay">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                        <div class="preset-info">
                            <h6 class="preset-name">{{ preset.name }}</h6>
                            <p class="preset-desc">{{ preset.description }}</p>
                            <a class="preset-link" target="_blank" rel="noopener"
                               href="{{ path('preview_' ~ grille.key, {presetId: preset.id}) }}">
                                <i class="fas fa-up-right-from-square"></i> Voir en grand
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
{% endfor %}