<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">
    <div class="panel-heading" role="tab" id="heading-{sectionName}">
        <h3 class="panel-title">
            <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion" href="#collapse-{sectionName}" aria-expanded="true" aria-controls="collapse-{sectionName}" class="collapsed">
                <span class="caret"></span>
                <strong>{sectionData.description}</strong> [{sectionName}]
            </a>
        </h3>
    </div>
    <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:if condition="{item.differentValueInCurrentConfiguration}">
                                <div class="t3js-infobox callout callout-warning">
                                    <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>
                            </f:if>
                            <f:if condition="{f:count(subject: item.allowedValues)} || {item.dataType} == 'dropdown'">
                                <f:then>
                                    <div class="form-group">
                                        <p class="form-text">{item.description -> f:format.raw()}</p>
                                        <select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-select t3js-localConfiguration-pathValue" {f:if(condition: '!{isWritable}', 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}', then: 'disabled')}
                                            />
                                            <label class="form-check-label" for="{sectionName}_{item.key}">
                                                <span class="form-check-label-text">{item.description -> f:format.raw()}</span>
                                            </label>
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'input'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <p class="form-text">{item.description -> f:format.raw()}</p>
                                            </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}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'password'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <p class="form-text">{item.description -> f:format.raw()}</p>
                                            </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}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'number'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <p class="form-text">{item.description -> f:format.raw()}</p>
                                            </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}', then: 'disabled')}
                                            />
                                        </div>
                                    </f:if>

                                    <f:if condition="{item.type} == 'textarea'">
                                        <div class="form-group">
                                            <f:if condition="{item.description}">
                                                <p class="form-text">{item.description -> f:format.raw()}</p>
                                            </f:if>
                                            <textarea
                                                rows="5"
                                                cols="60"
                                                data-path="{sectionName}/{item.key}"
                                                class="form-control t3js-localConfiguration-pathValue"
                                                {f:if(condition: '!{isWritable}', 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>
