<div class="search-popup js-search-popup" tabindex="-1">
    <div class="search-popup__wrapper">
        <div class="search-popup__heading">
            {% if options.search_title %}
                <h2 class="search-popup__title d-none d-sm-block">{{ options.search_title }}</h2>
            {% endif %}
            <button type="button" title="Sluit zoek popup" class="search-popup__close close-button js-close-search-popup" tabindex="-1">
                {{ icon('close', 'close-button__icon') }}
                <span class="hide-item">Sluiten</span>
            </button>
        </div>
        {% include '@components/Header/'~search_variation ~ '/search-input.twig' %}

        {% if options.frequently_searched_posts %}
            {% if options.search_title %}
                <h3 class="search-popup__subtitle">{{ options.frequently_searched_title }}</h3>
            {% endif %}
                <ul class="search-popup__link-container">
                {% for posts in options.frequently_searched_posts %}
                    <li class="search-popup__list">
                        <a href="{{ posts.select_post.url }}" class="search-popup__link" tabindex="-1">{{ posts.select_post.title }}</a>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>
</div>

<div class="search-popup-bg js-search-popup-bg"></div>
