{#
    SAM Page Header Component

    Parameters:
    - title: string (required) - Page title
    - icon: string - Icon name for the title (book, users, layers, grid, settings, chart, folder, file)
    - badge: string|number - Badge displayed before the title (e.g., section position)
    - subtitle: string - Subtitle with HTML support
    - status: object { visible: bool } - Shows visible/hidden pill
    - buttons: array - Action buttons
        - text: string - Button label
        - url: string - Link URL (not needed for sync or dataAction buttons)
        - style: string - primary, outline, secondary, danger, success
        - icon: string - plus, sync, edit, trash, download, upload, eye, link
        - sync: bool - If true, uses sync controller instead of link
        - dataAction: string - Stimulus data-action attribute (e.g., "click->controller#method")
    - sync: object { url: string, label: string } - Sync controller config
    - companySelector: object { companies, company, baseUrl, isAdmin } - Company selector for admins

    Usage examples:

    Basic:
    {% include 'sam/_components/page_header.html.twig' with {
        title: 'Gestion des cours',
        icon: 'book',
        subtitle: '<strong>102</strong> cours',
        buttons: [{ text: 'Synchroniser', style: 'outline', icon: 'sync', sync: true }],
        sync: { url: path('app_sam_sync'), label: 'cours' }
    } %}

    With Stimulus action button:
    {% include 'sam/_components/page_header.html.twig' with {
        title: 'Gestion des cohortes',
        icon: 'layers',
        subtitle: '<strong>15</strong> cohortes',
        buttons: [
            { text: 'Synchroniser', style: 'outline', icon: 'sync', sync: true },
            { text: 'Créer', style: 'primary', icon: 'plus', dataAction: 'click->controller#openModal' }
        ],
        sync: { url: path('app_sam_sync'), label: 'cohortes' }
    } %}

    With badge and status (for sections):
    {% include 'sam/_components/page_header.html.twig' with {
        title: 'Introduction',
        badge: 1,
        subtitle: '<strong>5</strong> activités',
        status: { visible: true }
    } %}
#}

{% set iconSvgs = {
    'book': '<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>',
    'users': '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>',
    'layers': '<polygon points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/>',
    'grid': '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/>',
    'settings': '<circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>',
    'chart': '<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>',
    'folder': '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>',
    'file': '<path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14,2 14,8 20,8"/>'
} %}

{% set buttonIconSvgs = {
    'plus': '<path d="M12 5v14M5 12h14"/>',
    'sync': '<path d="M23 4v6h-6M1 20v-6h6"/><path d="M3.51 9a9 9 0 0114.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0020.49 15"/>',
    'edit': '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/><path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>',
    'trash': '<polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>',
    'download': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/>',
    'upload': '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>',
    'eye': '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/>',
    'link': '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>'
} %}

<div class="sam-welcome sam-welcome--no-breadcrumb"
     {% if sync is defined and sync %}
         data-controller="sam--sync"
         data-sam--sync-url-value="{{ sync.url }}"
         data-sam--sync-label-value="{{ sync.label|default('données') }}"
     {% endif %}>
    <div class="sam-welcome__left">
        <h1 class="sam-welcome__title">
            {# Badge de position (pour les sections) #}
            {% if badge is defined and badge %}
                <span class="sam-welcome__badge">{{ badge }}</span>
            {% endif %}
            {# Icône #}
            {% if icon is defined and icon %}
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                    {{ iconSvgs[icon]|default(iconSvgs['file'])|raw }}
                </svg>
            {% endif %}
            {{ title|default('Page') }}
        </h1>
        {% if subtitle is defined and subtitle %}
            <p class="sam-welcome__subtitle">{{ subtitle|raw }}</p>
        {% endif %}
    </div>

    <div class="sam-welcome__actions">
        {# Company selector (admin only) #}
        {% if companySelector is defined and companySelector %}
            {% include 'sam/_components/company_selector.html.twig' with {
                companies: companySelector.companies,
                company: companySelector.company,
                baseUrl: companySelector.baseUrl,
                isAdmin: companySelector.isAdmin
            } %}
        {% endif %}

        {# Status pill (visible/masqué) #}
        {% if status is defined and status %}
            {% if status.visible %}
                <span class="sam-status-pill sam-status-pill--success">
                    <span class="sam-status-pill__dot"></span>
                    Visible
                </span>
            {% else %}
                <span class="sam-status-pill sam-status-pill--warning">
                    <span class="sam-status-pill__dot"></span>
                    Masqué
                </span>
            {% endif %}
        {% endif %}

        {# Buttons #}
        {% if buttons is defined and buttons|length > 0 %}
            {% for button in buttons %}
                {% set btnClass = 'sam-btn sam-btn--' ~ (button.style|default('outline')) %}

                {% if button.sync|default(false) %}
                    {# Sync button #}
                    <button type="button"
                            class="{{ btnClass }}"
                            data-action="click->sam--sync#sync"
                            data-sam--sync-target="button">
                        {% if button.icon is defined %}
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                {{ buttonIconSvgs[button.icon]|default('')|raw }}
                            </svg>
                        {% endif %}
                        <span data-sam--sync-target="label">{{ button.text }}</span>
                    </button>
                {% elseif button.dataAction is defined %}
                    {# Stimulus action button #}
                    <button type="button"
                            class="{{ btnClass }}"
                            data-action="{{ button.dataAction }}">
                        {% if button.icon is defined %}
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                {{ buttonIconSvgs[button.icon]|default('')|raw }}
                            </svg>
                        {% endif %}
                        {{ button.text }}
                    </button>
                {% else %}
                    {# Link button #}
                    <a href="{{ button.url }}" class="{{ btnClass }}">
                        {% if button.icon is defined %}
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                {{ buttonIconSvgs[button.icon]|default('')|raw }}
                            </svg>
                        {% endif %}
                        {{ button.text }}
                    </a>
                {% endif %}
            {% endfor %}
        {% endif %}
    </div>
</div>