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

<div class="panel panel-default">
    <h2 class="panel-heading" role="tab">
        <div class="panel-heading-row">
            <button
                class="panel-button collapsed"
                type="button"
                data-bs-toggle="collapse"
                data-bs-parent="#accordion"
                data-bs-target="#collapse-{sectionName}"
                aria-controls="collapse-{sectionName}"
                aria-expanded="false"
                id="heading-{sectionName}"
            >
                <div class="panel-title">
                    <strong>{sectionData.description}</strong> [{sectionName}]
                </div>
                <span class="caret"></span>
            </button>
        </div>
    </h2>
    <div id="collapse-{sectionName}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-{sectionName}">
        <div class="panel-body">
            <div class="localconf-list">
                <f:for each="{sectionData.items}" as="item">
                    <div class="localconf-item searchhit t3js-localConfiguration-item" id="{sectionName}-{item.key}">
                        <div class="localconf-item-heading">
                            <strong>[{sectionName}]{item.path} </strong>

                            <f:if condition="{item.type} == 'checkbox'">
                                <f:then>
                                    =
                                    <f:if condition="{item.value}">
                                        <f:then>true</f:then>
                                        <f:else>false</f:else>
                                    </f:if>
                                </f:then>
                                <f:else>
                                    <f:if condition="{item.value} && !{item.hideValue}">
                                        = {item.value -> f:format.crop(maxCharacters: 40, respectWordBoundaries:0, respectHtml:0)}
                                    </f:if>
                                </f:else>
                            </f:if>
                        </div>
                        <div class="localconf-item-body">
                            <f:render partial="Settings/ReadonlyInfo" arguments="{configuration: item}" />
                            <f:if condition="{item.differentValueInCurrentConfiguration}">
                                <div class="t3js-infobox callout callout-warning">
                                    <div class="callout-content">
                                        <div class="callout-body">
                                            Note that <code>$GLOBALS['TYPO3_CONF_VARS']</code> currently contains a different value.
                                            This could mean that the value is overwritten in system/additional.php.
                                        </div>
                                    </div>
                                </div>
                            </f:if>
                            <!-- @see typo3-formengine-table-wizard -->
                            <f:if condition="{item.type} == 'map' || {item.type} == 'element-list'">
                                <f:variable name="configurationListNamespace" value="item-{item.type}-{sectionName}-{item.key}" />

                                <f:if condition="{item.description}">
                                    <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                </f:if>

                                <div class="configuration-map-container t3js-configuration-list" data-namespace="{configurationListNamespace}" data-type="{item.type}">
                                    <div class="configuration-map-item-collection">
                                        <div class="configuration-map-item">
                                            <f:if condition="{item.type} == 'map'">
                                                <div class="configuration-map-item-header">{item.arrayKey}</div>
                                            </f:if>
                                            <div class="configuration-map-item-header">{item.arrayValue}</div>
                                        </div>
                                        <f:for each="{item.values}" as="value" key="key">
                                            <div class="configuration-map-item t3js-localConfiguration-configuration-item">
                                                <div class="input-group">
                                                    <f:if condition="{item.type} == 'map'">
                                                        <input
                                                            type="text"
                                                            value="{key}"
                                                            placeholder="{item.arrayKey} [enumerated when empty]"
                                                            data-path="{sectionName}/{item.key}/key[]"
                                                            data-valuetype="{item.type}"
                                                            class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                            autocomplete="off"
                                                            {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                                        />
                                                    </f:if>
                                                    <input
                                                        type="text"
                                                        value="{value}"
                                                        placeholder="{item.arrayValue} [required]"
                                                        data-path="{sectionName}/{item.key}/value[]"
                                                        data-valuetype="{item.type}"
                                                        class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                        autocomplete="off"
                                                        {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                                    />
                                                    <f:if condition="{isWritable} && !{item.readonly}">
                                                        <button class="btn btn-default t3js-localConfiguration-removeRow"><core:icon identifier="actions-remove" /></button>
                                                    </f:if>
                                                </div>
                                            </div>
                                        </f:for>
                                    </div>
                                    <f:if condition="{isWritable} && !{item.readonly}">
                                        <template id="{configurationListNamespace}">
                                            <div class="configuration-map-item t3js-localConfiguration-configuration-item">
                                                <div class="input-group">
                                                    <f:if condition="{item.type} == 'map'">
                                                        <input
                                                            type="text"
                                                            value=""
                                                            placeholder="{item.arrayKey} [enumerated when empty]"
                                                            data-path="{sectionName}/{item.key}/key[]"
                                                            data-valuetype="{item.type}"
                                                            class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                            autocomplete="off"
                                                            {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                                        />
                                                    </f:if>
                                                    <input
                                                        type="text"
                                                        value=""
                                                        placeholder="{item.arrayValue} [required]"
                                                        data-path="{sectionName}/{item.key}/value[]"
                                                        data-valuetype="{item.type}"
                                                        class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                        autocomplete="off"
                                                        {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                                    />
                                                    <button class="btn btn-default t3js-localConfiguration-removeRow"><core:icon identifier="actions-remove" /></button>
                                                </div>
                                            </div>
                                        </template>
                                        <button type="button" class="btn btn-default btn-configuration-map-add t3js-localConfiguration-createRow"><core:icon identifier="actions-add" /> Add item</button>
                                    </f:if>
                                </div>
                            </f:if>

                            <f:if condition="{f:count(subject: item.allowedValues)} || {item.dataType} == 'dropdown'">
                                <f:then>
                                    <div class="form-group">
                                        <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                        <select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-select t3js-localConfiguration-pathValue"
                                            {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            >
                                            <f:for each="{item.allowedValues}" key="optionKey" as="optionLabel">
                                                <option value="{optionKey}" {f:if(condition: '{item.value} == {optionKey}', then: 'selected="selected"')}>{optionLabel} ({optionKey})</option>
                                            </f:for>
                                        </select>
                                    </div>
                                </f:then>
                                <f:else>

                                    <f:if condition="{item.type} == 'checkbox'">
                                        <div class="form-check">
                                            <input
                                                type="checkbox"
                                                value="1"
                                                class="form-check-input t3js-localConfiguration-pathValue"
                                                id="{sectionName}_{item.key}"
                                                data-path="{sectionName}/{item.key}"
                                                {f:if(condition: item.checked, then:'checked="checked"')}
                                                {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            />
                                            <label class="form-check-label" for="{sectionName}_{item.key}">
                                                {item.description -> f:sanitize.html()}
                                            </label>
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'input'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                            </f:if>
                                            <input
                                                type="text"
                                                value="{item.value}"
                                                data-path="{sectionName}/{item.key}"
                                                class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                autocomplete="off"
                                                {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'password'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                            </f:if>
                                            <input
                                                type="password"
                                                value="{item.value}"
                                                data-path="{sectionName}/{item.key}"
                                                class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                autocomplete="new-password"
                                                {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'number'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                            </f:if>
                                            <input
                                                type="number"
                                                value="{item.value}"
                                                data-path="{sectionName}/{item.key}"
                                                class="t3-
                                                install-form-input-text form-control t3js-localConfiguration-pathValue"
                                                autocomplete="off"
                                                {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'textarea'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <div class="form-description">{item.description -> f:sanitize.html()}</div>
                                            </f:if>
                                            <textarea
                                                rows="5"
                                                cols="60"
                                                data-path="{sectionName}/{item.key}"
                                                class="form-control t3js-localConfiguration-pathValue"
                                                {f:if(condition: '!{isWritable} || {item.readonly}', then: 'disabled')}
                                            >{item.value}</textarea>
                                        </div>
                                    </f:if>

                                </f:else>
                            </f:if>

                            <f:if condition="{item.phpErrorCode}">
                                <div class="fieldNote">
                                    Current PHP error code <strong>{item.value}</strong> represents:<br/>
                                    <code>
                                        <i:format.phpErrorCode phpErrorCode="{item.value}"/>
                                    </code>
                                </div>
                            </f:if>
                        </div>
                    </div>
                </f:for>
                <div class="alert alert-warning m-0">
                    No settings have been found.
                </div>
            </div>
        </div>
    </div>
</div>

</html>
