<html
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<form action="{formUrl}" method="post">
    <div class="input-group">
        <button class="btn btn-default" type="submit" name="search">
            <core:icon identifier="actions-search" size="small" />
        </button>
        <label for="search_field" class="visually-hidden">
            <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.searchString"/>
        </label>
        <input
            class="form-control"
            type="search"
            placeholder="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}"
            title="{f:translate(id: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.searchString')}"
            name="search_field"
            id="search_field"
            value="{searchString}"
        />
        <f:if condition="{availableSearchLevels -> f:count()} > 0">
            <button class="btn btn-default dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"></button>
            <div class="dropdown-menu">
                <div class="row g-3">
                    <div class="col-12">
                        <label for="search_levels"><f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.label.search_levels" /></label>
                        <select class="form-select" name="search_levels" title="{f:translate(id: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search_levels')}" id="search_levels">
                            <f:for each="{availableSearchLevels}" as="searchLevel" key="level">
                                <option {f:if(condition: '{level} == {selectedSearchLevel}', then: ' selected="selected"')} value="{level}">
                                <f:translate id="LLL:{searchLevel}">{searchLevel}</f:translate>
                                </option>
                            </f:for>
                        </select>
                    </div>
                    <div class="col-12">
                        <button type="submit" class="float-end btn btn-default" name="searchSubmit" title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search')}">
                            <core:icon identifier="actions-search" />
                            <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.search"/>
                        </button>
                    </div>
                </div>
            </div>
        </f:if>
    </div>
</form>
