{#
 # ============================================================================
 # ORGANISM: CHOICE PAGE
 # ============================================================================
 #
 # Page « comment voulez-vous commencer ? » : en-tête centré, cartes de méthode,
 # bouton de retour. Gabarit commun aux pages de création des outils.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _organisms/choice-card/choice-card.html.twig
 # - _atoms/button/button.html.twig (variant: back)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre | Type   | Défaut    | Description                                  |
 # |-----------|--------|-----------|----------------------------------------------|
 # | icon      | string | (requis)  | Nom d'atome de l'outil                       |
 # | color     | object | null      | Entrée de tool_color_details                 |
 # | title     | string | (requis)  | Titre de la page                             |
 # | subtitle  | string | null      | Sous-titre                                   |
 # | choices   | array  | (requis)  | Jeux de paramètres de choice-card            |
 # | backLabel | string | 'Retour'  | Libellé du bouton de retour                  |
 # | backHref  | string | (requis)  | Cible du bouton de retour                    |
 # | class     | string | (voir ci-dessous) | Classes du conteneur                 |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% include '_organisms/choice-page/choice-page.html.twig' with {
 #     icon: 'bubul-slidia', color: tool_color_details['slidia'],
 #     title: 'Créez votre présentation',
 #     subtitle: 'Choisissez votre méthode.',
 #     choices: [
 #         { title: 'Importer un document', description: '…', icon: 'document', color: 'primary',
 #           features: [{ text: 'Structure automatique' }], href: path('app_slidia_configure', {method: 'pdf'}) }
 #     ],
 #     backLabel: 'Retour à mes présentations', backHref: path('app_slidia')
 # } only %}
 #
 # ============================================================================
 #}

{% set color = color ?? null %}
{% set subtitle = subtitle ?? null %}
{% set backLabel = backLabel ?? 'Retour' %}
{% set class = class ?? 'min-h-screen max-w-6xl mx-auto px-4 sm:px-6 py-4 lg:py-8' %}
{% set columns = choices|length >= 3 ? 'lg:grid-cols-3' : (choices|length == 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-1') %}

<div class="{{ class }}">
    <header class="text-center mb-12">
        <div class="inline-flex items-center justify-center w-20 h-20 mb-6 rounded-3xl border shadow-lg{% if not color %} bg-gradient-to-br from-primary/10 via-primary/5 to-transparent border-primary/10 shadow-primary/5 text-primary{% else %} border-gray-100{% endif %}"
             {% if color %}style="background: {{ color.bg }}; color: {{ color.primary }};"{% endif %}>
            {% include '_atoms/icon/icon.html.twig' with { name: icon, size: '3xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
        </div>
        <h1 class="text-3xl lg:text-4xl font-bold text-gray-900 font-secondary mb-3">{{ title }}</h1>
        {% if subtitle %}
            <p class="text-lg text-gray-500 max-w-xl mx-auto">{{ subtitle }}</p>
        {% endif %}
    </header>

    <div class="grid grid-cols-1 {{ columns }} gap-8">
        {% for choice in choices %}
            {% include '_organisms/choice-card/choice-card.html.twig' with choice only %}
        {% endfor %}
    </div>

    <div class="flex justify-center mt-12">
        {% include '_atoms/button/button.html.twig' with {
            label: backLabel,
            variant: 'back',
            href: backHref,
            size: 'md'
        } only %}
    </div>
</div>