{#
 # ============================================================================
 # ATOM: SELECT
 # ============================================================================
 #
 # Menu déroulant paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut    | Description                              |
 # |-------------|---------|-----------|------------------------------------------|
 # | options     | array   | []        | Options: [{value, label, disabled?}]    |
 # | value       | string  | null      | Valeur sélectionnée                      |
 # | placeholder | string  | null      | Option placeholder (non sélectionnable)  |
 # | label       | string  | null      | Label du select                          |
 # | name        | string  | null      | Attribut name                            |
 # | id          | string  | null      | Attribut id                              |
 # | required    | bool    | false     | Champ obligatoire                        |
 # | disabled    | bool    | false     | Désactivé                                |
 # | error       | string  | null      | Message d'erreur                         |
 # | hint        | string  | null      | Texte d'aide                             |
 # | size        | string  | 'md'      | Taille: sm, md, lg                       |
 # | class       | string  | ''        | Classes additionnelles                   |
 # | attr        | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Select simple:
 # {% include '_atoms/form/select.html.twig' with {
 #     label: 'Pays',
 #     placeholder: 'Sélectionnez un pays',
 #     options: [
 #         {value: 'fr', label: 'France'},
 #         {value: 'be', label: 'Belgique'},
 #         {value: 'ch', label: 'Suisse'}
 #     ]
 # } %}
 #
 # Avec valeur pré-sélectionnée:
 # {% include '_atoms/form/select.html.twig' with {
 #     label: 'Statut',
 #     value: 'active',
 #     options: [
 #         {value: 'active', label: 'Actif'},
 #         {value: 'inactive', label: 'Inactif'}
 #     ]
 # } %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set options = options ?? [] %}
{% set value = value ?? null %}
{% set placeholder = placeholder ?? null %}
{% set label = label ?? null %}
{% set name = name ?? null %}
{% set id = id ?? (name ? 'select-' ~ name : 'select-' ~ random()) %}
{% set required = required ?? false %}
{% set disabled = disabled ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

{# ============================================================================
   CLASSES TAILWIND - BASE
   ============================================================================ #}

{% set baseClasses = 'w-full font-primary appearance-none cursor-pointer transition-all duration-base ease-default border-2 outline-none bg-white text-black focus:border-primary focus:ring-2 focus:ring-primary/20' %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES
   ============================================================================ #}

{% set sizeClasses = {
    'sm': 'py-2.5 px-4 pr-10 text-sm rounded-lg',
    'md': 'py-4 px-5 pr-12 text-base rounded-lg',
    'lg': 'py-5 px-6 pr-14 text-lg rounded-xl'
} %}

{% set labelSizeClasses = {
    'sm': 'text-xs',
    'md': 'text-sm',
    'lg': 'text-base'
} %}

{% set iconSizes = {
    'sm': 'w-4 h-4 right-3',
    'md': 'w-5 h-5 right-4',
    'lg': 'w-6 h-6 right-5'
} %}

{# ============================================================================
   CLASSES TAILWIND - ÉTATS
   ============================================================================ #}

{% set stateClasses = error ? 'border-error focus:ring-error/20 focus:border-error' : 'border-gray-300' %}
{% set disabledClasses = disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : '' %}

{# ============================================================================
   ASSEMBLAGE DES CLASSES
   ============================================================================ #}

{% set selectClasses = [
    baseClasses,
    sizeClasses[size] ?? sizeClasses['md'],
    stateClasses,
    disabledClasses,
    class
]|join(' ')|trim %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<div class="w-full">

    {# ----- Label ----- #}
    {% if label %}
        <label for="{{ id }}" class="block font-medium text-gray-700 mb-1.5 {{ labelSizeClasses[size] ?? labelSizeClasses['md'] }}">
            {{ label }}
            {% if required %}
                <span class="text-error ml-0.5">*</span>
            {% endif %}
        </label>
    {% endif %}

    {# ----- Select wrapper ----- #}
    <div class="relative">
        <select
            id="{{ id }}"
            {% if name %}name="{{ name }}"{% endif %}
            {% if required %}required{% endif %}
            {% if disabled %}disabled{% endif %}
            class="{{ selectClasses }}"
            {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
        >
            {# Placeholder option #}
            {% if placeholder %}
                <option value="" disabled {{ not value ? 'selected' : '' }}>{{ placeholder }}</option>
            {% endif %}

            {# Options #}
            {% for option in options %}
                <option
                    value="{{ option.value }}"
                    {{ option.value == value ? 'selected' : '' }}
                    {{ option.disabled ?? false ? 'disabled' : '' }}
                >
                    {{ option.label }}
                </option>
            {% endfor %}
        </select>

        {# ----- Chevron icon ----- #}
        <span class="absolute top-1/2 -translate-y-1/2 pointer-events-none text-gray-400 {{ iconSizes[size] ?? iconSizes['md'] }}">
            <svg class="w-full h-full" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
            </svg>
        </span>
    </div>

    {# ----- Hint ----- #}
    {% if hint and not error %}
        <p class="mt-1.5 text-sm text-gray-500">{{ hint }}</p>
    {% endif %}

    {# ----- Error message ----- #}
    {% if error %}
        <p class="mt-1.5 text-sm text-error flex items-center gap-1">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ error }}
        </p>
    {% endif %}

</div>