<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"
>

<f:layout name="Module" />

<f:section name="Content">

    <f:be.pageRenderer
        includeJavaScriptModules="{
            0: '@typo3/backend/tree/tree-node-toggle.js',
            1: '@typo3/backend/utility/collapse-state-persister.js',
            2: '@typo3/backend/utility/collapse-state-search.js'
        }"
        addJsInlineLabels="{
            'collapse-state-search.numberOfSearchMatches': 'LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:module.configuration.numberOfSearchMatches'
        }"
    />

    <form action="" id="ConfigurationView" method="post">
        <h1><f:translate key="LLL:EXT:lowlevel/Resources/Private/Language/locallang.xlf:configuration.headline" arguments="{0: treeName}" /></h1>

        <div id="lowlevel-config" class="form-row">
            <div class="form-group">
                <form action="#">
                    <div class="input-group">
                        <input
                            type="text"
                            class="form-control form-control-clearable t3js-collapse-search-term"
                            name="searchValue"
                            id="searchValue"
                            data-persist-collapse-search-key="collapse-search-term-lowlevel-configuration-{treeLabelHash}"
                            value=""
                            minlength="3"
                            placeholder="{f:translate(key: 'LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.enterSearchString')}"
                        />
                        <button type="submit" class="btn btn-default disabled">
                            <span class="visually-hidden"><f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_core.xlf:labels.title.search"/></span>
                            <core:icon identifier="actions-search" />
                        </button>
                    </div>
                </form>
            </div>
            <div class="d-flex align-items-center">
                <span class="badge badge-success hidden t3js-collapse-states-search-numberOfSearchMatches"></span>
            </div>
        </div>

        <div class="t3js-collapse-states-search-tree">
            <f:format.raw>{tree}</f:format.raw>
        </div>
    </form>

</f:section>

</html>
