{#
    Page Hero (reusable header/hero band)
    Used at the top of page templates (e.g. actualite_hub, list, projects, ...).

    Params:
    - title (string, required): heading text
    - subtitle (string, optional): sub-heading text rendered under the title (only rendered
      when non-empty, or unconditionally in edit_mode so an empty field remains editable)
    - edit_mode (bool, default false): wraps title with inline-edit data attributes
    - edit_field (string, default 'title'): data-field value when edit_mode is true
    - edit_field_subtitle (string, default 'subtitle'): data-field value for the subtitle
      element when edit_mode is true
    - edit_section (string, default 'header'): data-section value when edit_mode is true
    - show_tags (bool, default false): render tag pills / tag picker child
    - tags (array, optional): tag entities, used when show_tags is true
    - entity_id (string, optional): page id, passed to TagPicker.ts when show_tags + edit_mode
    - tag_scope (string, default 'actualite'): Tag::SCOPE_* filter passed to TagPicker.ts
      (data-tag-scope) — restricts the pickable/creatable catalog to this context
    - title_class (string, optional): extra modifier class appended to the title (e.g. "page-hero__title--lato")
#}
<header class="page-hero">
    <img src="{{ asset('build/images/icologo.svg') }}" alt="" class="page-hero__ico" aria-hidden="true">
    <h1 class="page-hero__title {{ title_class|default('') }}"{% if edit_mode|default(false) %}
        data-editable="true"
        data-editor-type="simple"
        data-field="{{ edit_field|default('title') }}"
        data-section="{{ edit_section|default('header') }}"
        data-section-type="header"{% endif %}>
        {{ title }}
    </h1>

    {% if (subtitle is defined and subtitle) or edit_mode|default(false) %}
        <p class="page-hero__subtitle"{% if edit_mode|default(false) %}
            data-editable="true"
            data-editor-type="simple"
            data-field="{{ edit_field_subtitle|default('subtitle') }}"
            data-placeholder="Sous-titre"{% endif %}>{{ subtitle|default('') }}</p>
    {% endif %}

    {% if show_tags|default(false) %}
        {% if edit_mode|default(false) %}
            {# TagPicker.ts mounts here: page-level multi-select, GET /api/admin/tags,
               persists via PATCH /api/admin/pages/{id}/tags on save. Admin-only, never
               rendered on the public page. #}
            <div id="tag-picker"
                data-tag-picker="true"
                data-page-id="{{ entity_id }}"
                data-tag-scope="{{ tag_scope|default('actualite') }}"
                data-selected-tag-ids="{{ tags is defined ? tags|map(t => t.id)|join(',') : '' }}"></div>
        {% elseif tags is defined and tags is not empty %}
            <div class="page-hero__tags">
                {% for tag in tags %}
                    {% include 'components/_tag.html.twig' with { label: tag.name, disabled: true } %}
                {% endfor %}
            </div>
        {% endif %}
    {% endif %}
</header>