{% set target_id = target_id|default(page_key) %}
{% set image_path = image_path|default(viti_theme_asset(image)) %}
<div class="theme-header theme-hero">
    {% block hero_media %}
        <twig:Image
            mapping="public"
            class="theme-background-image"
            alt="{{ image_alt|trans({}, 'img') }}"
            lazy="{{ false }}"
            picture:style="width: 100%; height: 100%;"
            path="{{ image_path }}"
            pathLandscape="{{ image_path }}"
            ratio="16/9"
            imageWidth="1600"
            imageHeight="800"
        />
    {% endblock %}
    {% block hero_titles %}
        <div class="theme-container theme-hero-titles theme-header-title">
            <h2>{{ (page_key ~ '.baseline')|trans|raw }}</h2>
        </div>
        <div class="theme-container theme-hero-titles theme-header-title-bg">
            <h1 class="{{ title_class|default('') }}">{{ (page_key ~ '.title')|trans }}</h1>
        </div>
    {% endblock %}
    {% block hero_scroll_indicator %}
        <div class="theme-scroll-indicator theme-scroll-arrow">
            <a href="#{{ target_id }}" title="{{ 'content.a_arrow_down'|trans }}" rel="noreferrer">{{ (page_key ~ '.arrow')|trans|raw }}</a>
            <a href="#{{ target_id }}" title="{{ 'content.a_arrow_down'|trans }}" rel="noreferrer" aria-hidden="true" tabindex="-1">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45.7 94.9">
                    <polygon class="theme-scroll-arrow__path" points="23.9,94.9 22.4,94.9 0,68.6 1.5,67.3 22.2,91.5 22.2,0 24.2,0 24.2,91.5 44.2,68 45.7,69.3"/>
                </svg>
            </a>
        </div>
    {% endblock %}
</div>
