{#
 # ============================================================================
 # MOLECULE: STATUS ZONE
 # ============================================================================
 #
 # Zone d'action avec titre, description et bouton d'action.
 # Utilisé pour les actions de gestion (reset password, toggle status, etc.)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type   | Défaut    | Description                           |
 # |-------------|--------|-----------|---------------------------------------|
 # | title       | string | (requis)  | Titre de la zone                      |
 # | description | string | (requis)  | Description de l'action               |
 # | icon        | string | 'settings'| Icône du titre                        |
 # | variant     | string | 'neutral' | Variante: neutral, success, warning   |
 # | buttonLabel | string | 'Action'  | Label du bouton                       |
 # | buttonIcon  | string | null      | Icône du bouton                       |
 # | buttonVariant| string| null      | Variante du bouton (auto si null)     |
 # | modalId     | string | null      | ID du modal à ouvrir (onclick)        |
 # | href        | string | null      | Lien direct (si pas de modal)         |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Reset password:
 # {% include '_molecules/status-zone/status-zone.html.twig' with {
 #     title: 'Mot de passe',
 #     description: 'Générer un nouveau mot de passe.',
 #     icon: 'key',
 #     variant: 'neutral',
 #     buttonLabel: 'Réinitialiser',
 #     buttonIcon: 'refresh',
 #     modalId: 'modal-reset-password'
 # } only %}
 #
 # Statut compte actif:
 # {% include '_molecules/status-zone/status-zone.html.twig' with {
 #     title: 'Statut du compte',
 #     description: 'Ce compte est <strong>activé</strong>.',
 #     icon: 'power',
 #     variant: 'success',
 #     buttonLabel: 'Désactiver',
 #     buttonIcon: 'power',
 #     buttonVariant: 'warning',
 #     modalId: 'modal-toggle-status'
 # } only %}
 #
 # ============================================================================
 #}

{% set title = title|default('Action') %}
{% set description = description|default('') %}
{% set icon = icon|default('settings') %}
{% set variant = variant|default('neutral') %}
{% set buttonLabel = buttonLabel|default('Action') %}
{% set buttonIcon = buttonIcon|default(null) %}
{% set buttonVariant = buttonVariant|default(null) %}
{% set modalId = modalId|default(null) %}
{% set href = href|default(null) %}

{# Mapping des variantes vers les styles (gradients smooth) #}
{% set variantStyles = {
    'neutral': {
        'gradient': 'linear-gradient(135deg, rgba(12, 129, 228, 0.06), rgba(12, 129, 228, 0.02))',
        'border': 'rgba(12, 129, 228, 0.15)',
        'icon': 'primary'
    },
    'success': {
        'gradient': 'linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(16, 185, 129, 0.03))',
        'border': 'rgba(16, 185, 129, 0.25)',
        'icon': 'success'
    },
    'warning': {
        'gradient': 'linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(251, 191, 36, 0.03))',
        'border': 'rgba(245, 158, 11, 0.25)',
        'icon': 'warning'
    },
    'error': {
        'gradient': 'linear-gradient(135deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.03))',
        'border': 'rgba(239, 68, 68, 0.25)',
        'icon': 'error'
    },
    'info': {
        'gradient': 'linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(59, 130, 246, 0.03))',
        'border': 'rgba(59, 130, 246, 0.25)',
        'icon': 'info'
    }
} %}
{% set styles = variantStyles[variant]|default(variantStyles['neutral']) %}

{# Déterminer la variante du bouton si non spécifiée #}
{% if buttonVariant is null %}
    {% set buttonVariant = variant == 'neutral' ? 'secondary' : variant %}
{% endif %}

<div class="rounded-2xl p-8 transition-all duration-200 hover:shadow-md"
     style="background: {{ styles.gradient }}; border: 2px solid {{ styles.border }}">
    <div class="flex flex-col sm:flex-row sm:items-center gap-6">
        {# Contenu #}
        <div class="flex-1 flex items-start gap-5">
            <div class="flex-shrink-0 w-14 h-14 rounded-xl bg-white/80 backdrop-blur-sm border border-white/50 shadow-sm flex items-center justify-center">
                {% include '_atoms/icon/icon.html.twig' with {
                    name: icon,
                    size: 'lg',
                    color: styles.icon
                } only %}
            </div>
            <div class="flex-1 min-w-0 pt-1">
                <h4 class="text-lg font-semibold text-gray-900">{{ title }}</h4>
                <p class="text-base text-gray-600 mt-1.5 leading-relaxed">{{ description|raw }}</p>
            </div>
        </div>

        {# Bouton #}
        {% if modalId %}
            {% include '_atoms/button/button.html.twig' with {
                label: buttonLabel,
                variant: buttonVariant,
                icon: buttonIcon,
                size: 'lg',
                type: 'button',
                attr: { onclick: "openModal('" ~ modalId ~ "')" }
            } only %}
        {% elseif href %}
            {% include '_atoms/button/button.html.twig' with {
                label: buttonLabel,
                variant: buttonVariant,
                icon: buttonIcon,
                size: 'lg',
                href: href
            } only %}
        {% endif %}
    </div>
</div>