{#
 # ============================================================================
 # ORGANISM: TOOL HEADER
 # ============================================================================
 #
 # En-tête de la bibliothèque d'un outil : pastille produit, titre, badge,
 # description, coût médian et actions.
 #
 # S'utilise avec {% embed %} pour surcharger le bloc `actions` quand un outil a
 # plusieurs boutons ; un simple `primaryAction` suffit dans le cas courant.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/badge/badge.html.twig
 # - _atoms/button/button.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type   | Défaut   | Description                              |
 # |---------------|--------|----------|------------------------------------------|
 # | icon          | string | (requis) | Nom d'atome (ex. 'bubul-slidia')         |
 # | title         | string | (requis) | Nom de l'outil                           |
 # | description   | string | null     | Phrase de présentation                   |
 # | color         | object | null     | Entrée de tool_color_details             |
 # | badge         | object | null     | {label, variant}                         |
 # | cost          | object | null     | {value, unit} — coût médian en tokens    |
 # | primaryAction | object | null     | {label, href, icon, disabled}            |
 # | class         | string | 'mb-8'   | Classes du <header>                      |
 #
 # ============================================================================
 # BLOCS
 # ============================================================================
 #
 # | Bloc    | Description                                                     |
 # |---------|-----------------------------------------------------------------|
 # | actions | Zone de droite. Rend primaryAction par défaut. Le conteneur    |
 # |         | n'est pas rendu si le bloc reste vide (ni primaryAction, ni     |
 # |         | surcharge).                                                     |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% embed '_organisms/tool-header/tool-header.html.twig' with {
 #     icon: 'bubul-slidia', title: 'Slidia', color: tool_color_details['slidia'],
 #     description: 'Transformez vos idées en présentations.',
 #     primaryAction: { label: 'Créer une présentation', href: path('app_slidia_new'), icon: 'plus' }
 # } only %}
 #     {% block actions %}
 #         (plusieurs boutons ici)
 #     {% endblock %}
 # {% endembed %}
 #
 # ============================================================================
 #}

{% set class = class ?? 'mb-8' %}
{% set color = color ?? null %}
{% set badge = badge ?? null %}
{% set cost = cost ?? null %}
{% set description = description ?? null %}
{% set primaryAction = primaryAction ?? null %}

{#- `data-tour-step` : ancres GÉNÉRIQUES des tutoriels interactifs. Elles vivent sur
    l'organisme partagé plutôt que dans chaque gabarit d'outil, si bien qu'un tutoriel peut
    désigner « l'en-tête » ou « l'action principale » sans rien savoir de l'outil. Inertes :
    aucun style, aucun comportement. Voir docs/tours.md. -#}
<header class="{{ class }}" data-tour-step="outil-entete">
    <div class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-5">
        <div class="flex items-center gap-5">
            <div class="shrink-0 w-16 h-16 flex items-center justify-center rounded-2xl border{% if not color %} bg-gradient-to-br from-primary/10 to-primary/5 border-primary/10 text-primary{% endif %}"
                 {% if color %}style="background: linear-gradient(135deg, {{ color.bg }}, color-mix(in srgb, {{ color.primary }} 6%, white)); border-color: {{ color.border }}; color: {{ color.primary }};"{% endif %}>
                {% include '_atoms/icon/icon.html.twig' with { name: icon, size: '3xl', colorPrimary: 'current', colorSecondary: 'current' } only %}
            </div>
            <div class="flex flex-col gap-1">
                <div class="flex items-center gap-2.5">
                    <h1 class="text-2xl sm:text-3xl font-bold text-black font-secondary tracking-tight">{{ title }}</h1>
                    {% if badge %}
                        {% include '_atoms/badge/badge.html.twig' with {
                            label: badge.label|default(''),
                            variant: badge.variant|default('warning'),
                            customColor: color ? color.primary : null,
                            size: 'sm'
                        } only %}
                    {% endif %}
                </div>
                {% if description %}
                    <p class="text-sm text-gray-500">{{ description }}</p>
                {% endif %}
                {% if cost and cost.value|default(0) > 0 %}
                    <span class="hidden lg:inline-flex items-center gap-1 text-xs text-gray-400/70 truncate">
                        <span class="inline-flex items-center gap-0.5">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'xs', color: 'current' } only %}
                            ~{{ cost.value|default(0)|format_tokens }}
                        </span>
                        <span class="text-gray-300">/</span><span>{{ cost.unit|default('') }}</span>
                    </span>
                {% endif %}
            </div>
        </div>

        {% set actionsContent %}
            {% block actions %}
                {% if primaryAction %}
                    {% include '_atoms/button/button.html.twig' with {
                        label: primaryAction.label,
                        variant: color ? 'custom-gradient' : 'primary',
                        gradientFrom: color ? color.primary : null,
                        gradientTo: color ? color.secondary : null,
                        size: 'lg',
                        icon: primaryAction.icon|default('plus'),
                        iconSize: 'lg',
                        href: primaryAction.href|default(null),
                        disabled: primaryAction.disabled|default(false),
                        radius: 'lg',
                        class: 'w-full sm:w-auto'
                    } only %}
                {% endif %}
            {% endblock %}
        {% endset %}
        {% if actionsContent|trim is not empty %}
            <div class="flex items-center gap-3 flex-shrink-0" data-tour-step="outil-action-principale">
                {{ actionsContent }}
            </div>
        {% endif %}
    </div>
</header>