{namespace neos=Neos\Neos\ViewHelpers}

<section id="c-search-overlay" class="o-container c-search-overlay c-overlay show-lg">
    <div class="c-search">
        <form id="site-search" class="c-search__form" action="{neos:uri.node(node: searchPage)}">
            <label for="search-input"
                    class="visually-hidden"
                    id="search-label">
                Suchen
            </label>

            <input data-search-focus-target
                class="c-search__input"
                type="text"
                name="search"
                placeholder="Suchbegriff eingeben"
                id="search-input" />

            <button type="submit"
                    class="c-search__submit"
                    aria-labelledby="search-label">

                <svg class="c-icon"
                    aria-hidden="true"
                    focusable="false">
                    <use xlink:href="#icon-search" />
                </svg>
            </button>
        </form>
    </div>

    <f:if condition="{searchButtonCount} != 0">
        <h4 class="c-search-overlay__headline">{f:translate(id: 'word.searchterms', source: 'Main', package: 'Newland.CityTheme')}</h4>

        <div class="c-search-overlay__keyword-list">
            {searchButtons -> f:format.raw()}
        </div>
    </f:if>

    <a
        class="c-search-button__close c-button c-button--soft-rounded"
        href="#search-layer"
        data-target-enhancement
        data-target-enhancement-targets.0="#c-search-overlay"
        data-target-enhancement-plugins.0.name="toggle-aria-expanded"
        data-target-enhancement-plugins.1.name="trigger-bind"
        data-target-enhancement-plugins.1.options.selector=".c-search-toggle"
        aria-haspopup="true"
        aria-expanded="false">

        <svg class="c-icon">
            <use xlink:href="#icon-close"></use>
        </svg>
        schließen
    </a>
</section>
