{#
 # ============================================================================
 # MOLECULE: ENROLLED CARD
 # ============================================================================
 #
 # Carte d'utilisateur inscrit avec avatar, infos, progression et actions.
 # Idéal pour les listes d'inscrits, cohortes, équipes.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/avatar/avatar.html.twig
 # - _atoms/icon/icon.html.twig
 # - _molecules/progress-ring/progress-ring.html.twig (optionnel)
 # - _molecules/action-bar/action-bar.html.twig (optionnel)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | name          | string  | (requis)  | Nom de la personne                |
 # | email         | string  | null      | Email ou info secondaire          |
 # | avatar        | string  | null      | URL de l'avatar (ou initiales)    |
 # | initials      | string  | null      | Initiales (si pas d'avatar)       |
 # | progress      | number  | null      | Progression 0-100 (affiche ring)  |
 # | status        | string  | null      | Statut (active, pending, etc.)    |
 # | badge         | object  | null      | Badge { label, variant }          |
 # | actions       | array   | null      | Actions (voir action-bar)         |
 # | href          | string  | null      | URL (rend la carte cliquable)     |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple:
 # {% include '_molecules/enrolled-card/enrolled-card.html.twig' with {
 #     name: 'Jean Dupont',
 #     email: 'jean@example.com'
 # } %}
 #
 # Avec progression et actions:
 # {% include '_molecules/enrolled-card/enrolled-card.html.twig' with {
 #     name: 'Marie Martin',
 #     email: 'marie@example.com',
 #     progress: 75,
 #     actions: [
 #         { icon: 'eye', title: 'Voir', href: '/users/1' },
 #         { icon: 'trash', title: 'Retirer', variant: 'danger' }
 #     ]
 # } %}
 #
 # Avec badge de statut:
 # {% include '_molecules/enrolled-card/enrolled-card.html.twig' with {
 #     name: 'Pierre Durand',
 #     email: 'pierre@example.com',
 #     badge: { label: 'Admin', variant: 'primary' }
 # } %}
 #
 # ============================================================================
 #}

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

{% set name = name ?? 'Utilisateur' %}
{% set email = email ?? null %}
{% set avatar = avatar ?? null %}
{% set initials = initials ?? null %}
{% set progress = progress ?? null %}
{% set status = status ?? null %}
{% set badge = badge ?? null %}
{% set actions = actions ?? null %}
{% set href = href ?? null %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}

{# Auto-generate initials if not provided #}
{% if not initials and not avatar %}
    {% set nameParts = name|split(' ') %}
    {% set initials = (nameParts[0]|first|upper) ~ (nameParts[1] is defined ? nameParts[1]|first|upper : '') %}
{% endif %}

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

{% set sizeConfig = {
    'sm': {
        'padding': 'px-3 py-2',
        'avatar': 'sm',
        'name': 'text-sm',
        'email': 'text-xs',
        'gap': 'gap-2',
        'progressSize': 'sm'
    },
    'md': {
        'padding': 'px-4 py-3',
        'avatar': 'md',
        'name': 'text-sm',
        'email': 'text-xs',
        'gap': 'gap-3',
        'progressSize': 'sm'
    },
    'lg': {
        'padding': 'px-5 py-4',
        'avatar': 'lg',
        'name': 'text-base',
        'email': 'text-sm',
        'gap': 'gap-4',
        'progressSize': 'md'
    }
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}

{% set statusColors = {
    'active': 'bg-green-100 text-green-800',
    'pending': 'bg-yellow-100 text-yellow-800',
    'inactive': 'bg-gray-100 text-gray-600',
    'suspended': 'bg-red-100 text-red-800'
} %}

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

{% set tag = href ? 'a' : 'div' %}

<{{ tag }}
    {% if href %}href="{{ href }}"{% endif %}
    class="flex items-center {{ sConfig.gap }} {{ sConfig.padding }} bg-white rounded-xl border border-gray-200 {{ href ? 'hover:border-primary/30 hover:shadow-sm transition-all cursor-pointer' : '' }} {{ class }}"
>
    {# Avatar #}
    {% include '_atoms/avatar/avatar.html.twig' with {
        src: avatar,
        initials: initials,
        alt: name,
        size: sConfig.avatar
    } only %}

    {# Info #}
    <div class="flex-1 min-w-0">
        <div class="flex items-center gap-2">
            <span class="{{ sConfig.name }} font-medium text-gray-900 truncate">{{ name }}</span>

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

        {% if email %}
            <p class="{{ sConfig.email }} text-gray-500 truncate">{{ email }}</p>
        {% endif %}

        {% if status and not badge %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium {{ statusColors[status] ?? statusColors['inactive'] }}">
                {{ status|capitalize }}
            </span>
        {% endif %}
    </div>

    {# Progress ring #}
    {% if progress is not null %}
        <div class="flex-shrink-0">
            {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                value: progress,
                size: sConfig.progressSize,
                showValue: true
            } only %}
        </div>
    {% endif %}

    {# Actions #}
    {% if actions %}
        <div class="flex-shrink-0" onclick="event.stopPropagation();">
            {% include '_molecules/action-bar/action-bar.html.twig' with {
                actions: actions,
                size: 'sm'
            } only %}
        </div>
    {% endif %}
</{{ tag }}>