{#
 # ============================================================================
 # MOLECULE: PAGE HEADER
 # ============================================================================
 #
 # En-tête de page complet avec titre, breadcrumb, description et actions.
 # Utilisé en haut des pages principales.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/button/button.html.twig
 # - _atoms/badge/badge.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | title         | string  | (requis)  | Titre de la page                  |
 # | subtitle      | string  | null      | Description/sous-titre            |
 # | icon          | string  | null      | Icône avant le titre              |
 # | badge         | object  | null      | Badge { text, variant }           |
 # | breadcrumb    | array   | null      | Fil d'ariane [{label, href}]      |
 # | actions       | array   | null      | Boutons d'action                  |
 # | backHref      | string  | null      | Lien de retour                    |
 # | backLabel     | string  | 'Retour'  | Label du bouton retour            |
 # | variant       | string  | 'default' | default, compact, centered        |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # En-tête simple:
 # {% include '_molecules/page-header/page-header.html.twig' with {
 #     title: 'Mes cours',
 #     subtitle: 'Gérez vos cours Moodia'
 # } %}
 #
 # Avec breadcrumb et actions:
 # {% include '_molecules/page-header/page-header.html.twig' with {
 #     title: 'Nouveau cours',
 #     breadcrumb: [
 #         { label: 'Dashboard', href: '/' },
 #         { label: 'Cours', href: '/courses' }
 #     ],
 #     actions: [
 #         { label: 'Sauvegarder', variant: 'primary', icon: 'check' }
 #     ]
 # } %}
 #
 # Avec retour:
 # {% include '_molecules/page-header/page-header.html.twig' with {
 #     title: 'Détails du cours',
 #     backHref: '/courses',
 #     badge: { text: 'Brouillon', variant: 'warning' }
 # } %}
 #
 # ============================================================================
 #}

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

{% set title = title ?? 'Page' %}
{% set subtitle = subtitle ?? null %}
{% set icon = icon ?? null %}
{% set badge = badge ?? null %}
{% set breadcrumb = breadcrumb ?? null %}
{% set actions = actions ?? null %}
{% set backHref = backHref ?? null %}
{% set backLabel = backLabel ?? 'Retour' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set variantConfig = {
    'default': {
        'container': 'py-6',
        'titleSize': 'text-2xl',
        'subtitleSize': 'text-base',
        'iconSize': 'xl',
        'alignment': 'items-start'
    },
    'compact': {
        'container': 'py-4',
        'titleSize': 'text-xl',
        'subtitleSize': 'text-sm',
        'iconSize': 'lg',
        'alignment': 'items-center'
    },
    'centered': {
        'container': 'py-8 text-center',
        'titleSize': 'text-3xl',
        'subtitleSize': 'text-lg',
        'iconSize': '2xl',
        'alignment': 'items-center justify-center'
    }
} %}

{% set vConfig = variantConfig[variant] ?? variantConfig['default'] %}

{% set containerClasses = [
    vConfig.container,
    class
]|join(' ')|trim %}

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

<header class="{{ containerClasses }}">
    {# Breadcrumb #}
    {% if breadcrumb %}
        <nav class="mb-3" aria-label="Fil d'ariane">
            <ol class="flex items-center gap-2 text-sm text-gray-500">
                {% for crumb in breadcrumb %}
                    <li class="flex items-center gap-2">
                        {% if crumb.href is defined and crumb.href %}
                            <a href="{{ crumb.href }}" class="hover:text-primary transition-colors">
                                {{ crumb.label }}
                            </a>
                        {% else %}
                            <span>{{ crumb.label }}</span>
                        {% endif %}

                        {% if not loop.last %}
                            <span class="text-gray-300">/</span>
                        {% endif %}
                    </li>
                {% endfor %}
            </ol>
        </nav>
    {% endif %}

    {# Bouton retour #}
    {% if backHref %}
        <a href="{{ backHref }}" class="inline-flex items-center gap-2 text-sm text-gray-500 hover:text-gray-700 mb-3 transition-colors">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'arrow-left',
                size: 'sm',
                color: 'muted'
            } only %}
            {{ backLabel }}
        </a>
    {% endif %}

    {# Contenu principal #}
    <div class="flex {{ variant == 'centered' ? 'flex-col' : 'flex-col sm:flex-row sm:justify-between' }} {{ vConfig.alignment }} gap-4">
        {# Titre et description #}
        <div class="{{ variant == 'centered' ? 'flex flex-col items-center' : '' }}">
            <div class="flex items-center gap-3">
                {% if icon %}
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: icon,
                        size: vConfig.iconSize,
                        color: 'primary'
                    } only %}
                {% endif %}

                <h1 class="{{ vConfig.titleSize }} font-bold text-gray-900">
                    {{ title }}
                </h1>

                {% if badge %}
                    {% include '_atoms/badge/badge.html.twig' with {
                        text: badge.text,
                        variant: badge.variant ?? 'primary',
                        size: 'md'
                    } only %}
                {% endif %}
            </div>

            {% if subtitle %}
                <p class="{{ vConfig.subtitleSize }} text-gray-500 mt-1 {% if icon %}ml-10{% endif %}">
                    {{ subtitle }}
                </p>
            {% endif %}
        </div>

        {# Actions #}
        {% if actions %}
            <div class="flex items-center gap-2 flex-shrink-0">
                {% for action in actions %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: action.label,
                        variant: action.variant ?? 'secondary',
                        size: action.size ?? 'lg',
                        icon: action.icon ?? null,
                        href: action.href ?? null,
                        type: action.type ?? 'button'
                    } only %}
                {% endfor %}
            </div>
        {% endif %}
    </div>
</header>