{namespace neos=Neos\Neos\ViewHelpers}

<div id="search-layer" data-overlay class="c-search-overlay c-overlay {f:if(condition: '{transparentBackground}', then: ' c-search-overlay--blurred')}">
    <div class="c-search__inner">
        <form id="site-search" class="c-search__form" action="{neos:uri.node(node: searchPage)}">
            <label for="search-input"
                    class="visually-hidden"
                    id="search-label">
                <f:translate id="word.search" package="Newland.CityTheme" source="Main" />
            </label>

            <input data-search-focus-target
                class="c-search__input"
                type="text"
                name="search"
                placeholder="{f:translate(id: 'word.insertSearchTerm', source: 'Main', package: 'Newland.CityTheme')}"
                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>

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

            {searchButtons -> f:format.raw()}
        </f:if>
    </div>
</div>