<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 panel-flat">
    <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}">
        <f:for each="{sectionData.items}" as="item">
            <a id="{sectionName}-{item.key}"></a>
            <div class="item">
                <div class="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="item-body">
                    <f:if condition="{item.differentValueInCurrentConfiguration}">
                        <div class="t3js-infobox callout callout-sm 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 AdditionalConfiguration.php.
                            </div>
                        </div>
                    </f:if>
                    <f:if condition="{f:count(subject: item.allowedValues)} || {item.dataType} == 'dropdown'">
                        <f:then>
                            <div class="form-group">
                                <span class="help-block">{item.description -> f:format.raw()}</span>
                                <select data-path="{sectionName}/{item.key}" class="t3-install-form-input-text form-select t3js-localConfiguration-pathValue">
                                    <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"')}
                                    />
                                    <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">
                                    <span class="help-block">{item.description -> f:format.raw()}</span>
                                    <input
                                        type="text"
                                        value="{item.value}"
                                        data-path="{sectionName}/{item.key}"
                                        class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                        autocomplete="off"
                                    />
                                </div>
                            </f:if>

                            <f:if condition="{item.type} == 'password'">
                                <div class="form-group">
                                    <span class="help-block">{item.description -> f:format.raw()}</span>
                                    <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"
                                    />
                                </div>
                            </f:if>

                            <f:if condition="{item.type} == 'number'">
                                <div class="form-group">
                                    <span class="help-block">{item.description -> f:format.raw()}</span>
                                    <input
                                        type="number"
                                        value="{item.value}"
                                        data-path="{sectionName}/{item.key}"
                                        class="t3-install-form-input-text form-control t3js-localConfiguration-pathValue"
                                        autocomplete="off"
                                    />
                                </div>
                            </f:if>

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

</html>
