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

<div class="panel panel-default searchhit">
    <h2 class="panel-heading" role="tab">
        <div class="panel-heading-row">
            <button
                class="panel-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#collapse-{extensionKey}"
                aria-controls="collapse-{extensionKey}"
                aria-expanded="false"
                id="heading-{extensionKey}"
            >
                <div class="panel-title">
                    <strong>{extensionKey}</strong>
                </div>
                <span class="caret"></span>
            </button>
        </div>
    </h2>
    <div id="collapse-{extensionKey}" class="panel-collapse collapse search-item" role="tabpanel" aria-labelledby="heading-{extensionKey}">
        <div class="panel-body">
            <div role="tabpanel">
                <ul class="nav nav-tabs" role="tablist">
                    <f:for each="{extensionData}" as="category" key="categoryName" iteration="iteration">
                        <f:if condition="{categoryName}">
                            <li role="presentation" class="nav-item">
                                <button
                                    type="button"
                                    class="nav-link{f:if(condition:'{iteration.isFirst}', then:' active')}"
                                    data-bs-toggle="tab"
                                    data-bs-target="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}"
                                    aria-controls="category-{extensionKey}-{categoryName}"
                                    role="tab"
                                >
                                    {categoryName}
                                </button>
                            </li>
                        </f:if>
                    </f:for>
                </ul>

                <form action="#" name="configurationform" autocomplete="off" class="t3js-extensionConfiguration-form extensionConfiguration-form" data-extension-key="{extensionKey}" spellcheck="false">

                    <div class="tab-content">
                        <f:for each="{extensionData}" as="subcategories" key="categoryName" iteration="iterator">
                            <div role="tabpanel" class="tab-pane {f:if(condition:'{iterator.isFirst}', then:'active')}" id="{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}">
                                <f:for each="{subcategories}" as="subcategory">
                                    <div class="form-section">
                                        <f:for each="{subcategory.items}" as="configurationItem" iteration="itemIterator">
                                            <f:if condition="{itemIterator.isFirst}">
                                                <h2 class="h4 form-section-headline">{configurationItem.subcat_label}</h2>
                                            </f:if>
                                            <div class="form-group form-group-dashed">
                                                <label class="form-label" for="em-{extensionKey}-{configurationItem.name}">
                                                    <span>{configurationItem.label}</span> <code>({categoryName}.{configurationItem.name} [{configurationItem.type}])</code>
                                                </label>
                                                <f:if condition="{configurationItem.description}">
                                                    <div class="form-description">{configurationItem.description -> f:format.nl2br()}</div>
                                                </f:if>
                                                <f:if condition="{configurationItem.typeHint}">
                                                    <div class="form-description">{configurationItem.typeHint}</div>
                                                </f:if>
                                                <div class="form-control-wrap">
                                                    <f:switch expression="{configurationItem.type}">

                                                        <f:case value="int+">
                                                            <input
                                                                class="form-control"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                type="number"
                                                                name="{configurationItem.name}"
                                                                value="{configurationItem.value}"
                                                                {f:if(condition: '{configurationItem.typeIntPlusMin} || {configurationItem.typeIntPlusMin == 0}', then: 'min="{configurationItem.typeIntPlusMin}"')}
                                                                {f:if(condition: configurationItem.typeIntPlusMax, then: 'max="{configurationItem.typeIntPlusMax}"')}
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            >
                                                        </f:case>
                                                        <f:case value="int">
                                                            <input
                                                                class="form-control"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                type="number"
                                                                name="{configurationItem.name}"
                                                                value="{configurationItem.value}"
                                                                {f:if(condition: '{configurationItem.typeIntMin} || {configurationItem.typeIntMin == 0}', then: 'min="{configurationItem.typeIntMin}"')}
                                                                {f:if(condition: '{configurationItem.typeIntMax} || {configurationItem.typeIntMax == 0}', then: 'max="{configurationItem.typeIntMax}"')}
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            >
                                                        </f:case>
                                                        <f:case value="string">
                                                            <input
                                                                class="form-control"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                type="text"
                                                                name="{configurationItem.name}"
                                                                value="{configurationItem.value}"
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            />
                                                        </f:case>
                                                        <f:case value="color">
                                                            <typo3-backend-color-picker>
                                                                <input
                                                                    class="form-control"
                                                                    type="text"
                                                                    id="em-{extensionKey}-{configurationItem.name}"
                                                                    name="{configurationItem.name}"
                                                                    value="{configurationItem.value}"
                                                                    {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                                />
                                                            </typo3-backend-color-picker>
                                                        </f:case>
                                                        <f:case value="wrap">
                                                            <input
                                                                class="form-control t3js-emconf-wrap"
                                                                type="text"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                name="{configurationItem.name}"
                                                                value="{configurationItem.value}"
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            />
                                                        </f:case>
                                                        <f:case value="offset">
                                                            <input
                                                                type="text"
                                                                class="form-control t3js-emconf-offset"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                name="{configurationItem.name}"
                                                                value="{configurationItem.value}"
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            />
                                                        </f:case>
                                                        <f:case value="options">
                                                            <select
                                                                class="form-select"
                                                                id="em-{extensionKey}-{configurationItem.name}"
                                                                name="{configurationItem.name}"
                                                                {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                            >
                                                                <f:for each="{configurationItem.labelValueArray}" as="labelAndValue">
                                                                    <option value="{labelAndValue.value}" {f:if(condition: '{labelAndValue.value} == {configurationItem.value}', then: 'selected')}>
                                                                        {labelAndValue.label}
                                                                    </option>
                                                                </f:for>
                                                            </select>
                                                        </f:case>
                                                        <f:case value="boolean">
                                                            <div class="form-check">
                                                                <input
                                                                    type="hidden"
                                                                    name="{configurationItem.name}"
                                                                    value="0"
                                                                />
                                                                <input
                                                                    type="checkbox"
                                                                    name="{configurationItem.name}"
                                                                    id="em-{extensionKey}-{configurationItem.name}"
                                                                    class="form-check-input"
                                                                    value="{configurationItem.trueValue}"
                                                                    {f:if(condition: '{configurationItem.value} == {configurationItem.trueValue}', then: 'checked')}
                                                                    {f:if(condition: '!{isWritable}', then: 'disabled')}
                                                                />
                                                            </div>
                                                        </f:case>
                                                        <f:case value="user">
                                                            {configurationItem.html -> f:format.raw()}
                                                        </f:case>

                                                    </f:switch>

                                                </div>
                                            </div>
                                        </f:for>
                                    </div>
                                </f:for>
                            </div>
                        </f:for>
                    </div>

                    <f:if condition="{isWritable}">
                        <button type="submit" class="btn btn-default" name="save">Save "{extensionKey}" configuration</button>
                    </f:if>

                </form>

            </div>
        </div>
    </div>
</div>

</html>
