{#
 # ============================================================================
 # MOLECULE: TAG GROUP
 # ============================================================================
 #
 # Collection de tags avec troncature et indicateur "+X more".
 # Idéal pour afficher des compétences, catégories, associations.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/tag/tag.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | tags          | array   | (requis)  | Liste des tags (strings ou objets)|
 # |   └ label     | string  | (requis)  | Texte du tag                      |
 # |   └ href      | string  | null      | URL du tag (cliquable)            |
 # |   └ variant   | string  | 'default' | Variante de couleur               |
 # |   └ icon      | string  | null      | Icône du tag                      |
 # | max           | number  | null      | Nombre max de tags visibles       |
 # | size          | string  | 'sm'      | xs, sm, md                        |
 # | variant       | string  | 'default' | Variante par défaut des tags      |
 # | expandable    | bool    | false     | Permettre d'afficher tous les tags|
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple (strings):
 # {% include '_molecules/tag-group/tag-group.html.twig' with {
 #     tags: ['PHP', 'Symfony', 'Docker'],
 #     max: 2
 # } %}
 #
 # Avec objets:
 # {% include '_molecules/tag-group/tag-group.html.twig' with {
 #     tags: [
 #         { label: 'Actif', variant: 'success' },
 #         { label: 'Premium', variant: 'warning', icon: 'crown' }
 #     ]
 # } %}
 #
 # Cliquables:
 # {% include '_molecules/tag-group/tag-group.html.twig' with {
 #     tags: [
 #         { label: 'Design', href: '/tags/design' },
 #         { label: 'Dev', href: '/tags/dev' }
 #     ]
 # } %}
 #
 # ============================================================================
 #}

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

{% set tags = tags ?? [] %}
{% set max = max ?? null %}
{% set size = size ?? 'sm' %}
{% set variant = variant ?? 'default' %}
{% set expandable = expandable ?? false %}
{% set class = class ?? '' %}

{# ============================================================================
   CALCUL DES TAGS VISIBLES
   ============================================================================ #}

{% set totalTags = tags|length %}
{% set visibleTags = max ? tags|slice(0, max) : tags %}
{% set hiddenCount = max ? (totalTags - max) : 0 %}
{% set hasMore = hiddenCount > 0 %}

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

{% set sizeConfig = {
    'xs': { 'gap': 'gap-1', 'more': 'text-xs px-1.5 py-0.5' },
    'sm': { 'gap': 'gap-1.5', 'more': 'text-xs px-2 py-0.5' },
    'md': { 'gap': 'gap-2', 'more': 'text-sm px-2.5 py-1' }
} %}

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

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

<div class="flex flex-wrap items-center {{ sConfig.gap }} {{ class }}"
     {% if expandable and hasMore %}
         data-controller="tag-group"
         data-tag-group-expanded-value="false"
     {% endif %}>

    {# Tags visibles #}
    {% for tag in visibleTags %}
        {% set tagLabel = tag.label is defined ? tag.label : tag %}
        {% set tagVariant = tag.variant is defined ? tag.variant : variant %}
        {% set tagHref = tag.href ?? null %}
        {% set tagIcon = tag.icon ?? null %}

        {% include '_atoms/tag/tag.html.twig' with {
            label: tagLabel,
            color: tagVariant,
            size: size,
            href: tagHref,
            icon: tagIcon
        } only %}
    {% endfor %}

    {# Tags cachés (si expandable) #}
    {% if expandable and hasMore %}
        {% for tag in tags|slice(max) %}
            {% set tagLabel = tag.label is defined ? tag.label : tag %}
            {% set tagVariant = tag.variant is defined ? tag.variant : variant %}
            {% set tagHref = tag.href ?? null %}
            {% set tagIcon = tag.icon ?? null %}

            <span data-tag-group-target="hidden" class="hidden">
                {% include '_atoms/tag/tag.html.twig' with {
                    label: tagLabel,
                    variant: tagVariant,
                    size: size,
                    href: tagHref,
                    icon: tagIcon
                } only %}
            </span>
        {% endfor %}
    {% endif %}

    {# Indicateur "+X more" #}
    {% if hasMore %}
        {% if expandable %}
            <button type="button"
                    class="{{ sConfig.more }} rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors cursor-pointer font-medium"
                    data-action="tag-group#toggle"
                    data-tag-group-target="button">
                +{{ hiddenCount }}
            </button>
        {% else %}
            <span class="{{ sConfig.more }} rounded-full bg-gray-100 text-gray-500 font-medium"
                  data-tooltip="{{ hiddenCount }} élément(s) supplémentaire(s)">
                +{{ hiddenCount }}
            </span>
        {% endif %}
    {% endif %}
</div>