{% set config = element.config %}
{% set mediaId = config.media.value %}
{% set mediaCollection = searchMedia([mediaId], context.context) %}
{% set media = mediaCollection.get(mediaId) %}
{% set mediaUrl = media.url %}

{% set searchWidgetOptions = {
    searchWidgetMinChars: page.header.activeLanguage.productSearchConfig.minSearchLength ?: 3
} %}

<div
    class="cms-element-{{ element.type }}"
    style="
        height:{{ config.elementHeight.value }};
        background-image:url('{{ mediaUrl }}');
        background-size:{{ config.backgroundSize.value }};
        background-attachment:{{ config.backgroundAttachment.value }};
        background-repeat:{{ config.backgroundRepeat.value }};
        background-position:{{ config.backgroundPosition.value }};
        ">

    {% if config.searchActive.value or config.captionActive.value %}
        <div class="container">
            <div class="moorl-hero-inner-container">
                {% if config.captionActive.value %}
                    <div class="moorl-hero-caption" style="color:{{ config.textColor.value }};{% if config.textShadowActive.value %}text-shadow:2px 2px 15px #000{% endif %}">
                        <div class="moorl-hero-headline">{{ config.headline.value }}</div>
                        <div class="moorl-hero-text">{{ config.subHeadline.value }}</div>
                    </div>
                {% endif %}

                {% if config.searchActive.value %}
                    <div class="moorl-hero-search">
                        <form
                                action="{{ path('frontend.search.page') }}"
                                method="get"
                                data-search-widget="true"
                                data-search-widget-options="{{ searchWidgetOptions|json_encode }}"
                                data-url="{{ path('frontend.search.suggest') }}?search="
                                class="header-search-form"
                        >
                            <div class="input-group">
                                <input type="search"
                                       name="search"
                                       class="form-control header-search-input"
                                       autocomplete="off"
                                       autocapitalize="off"
                                       placeholder="{{ 'header.searchPlaceholder'|trans|striptags }}"
                                       aria-label="{{ 'header.searchPlaceholder'|trans|striptags }}"
                                       value="{{ page.searchTerm }}"
                                >

                                <button type="submit"
                                        class="btn header-search-btn"
                                        aria-label="{{ "header.searchButton"|trans|striptags }}">
                                    <span class="header-search-icon">
                                        {% sw_icon 'search' style {pack: 'fas'} %}
                                    </span>
                                </button>

                                <a class="btn header-close-btn js-search-close-btn d-none"
                                   aria-label="{{ 'header.searchCloseButton'|trans|striptags }}">
                                    <span class="header-close-icon">
                                        {% sw_icon 'x' %}
                                    </span>
                                </a>
                            </div>
                        </form>
                    </div>
                {% endif %}
            </div>
        </div>
    {% endif %}
</div>