<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 panel-flat searchhit">
    <div class="panel-heading" role="tab" id="heading-{extensionKey}">
        <h3 class="panel-title">
            <a role="button" data-bs-toggle="collapse" href="#collapse-{extensionKey}" aria-expanded="false" aria-controls="collapse-{extensionKey}" class="collapsed">
                <span class="caret"></span>
                <strong>{extensionData.packageInfo.packageKey}</strong>
            </a>
        </h3>
    </div>
    <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.configuration}" as="category" key="categoryName" iteration="iteration">
                        <f:if condition="{categoryName}">
                            <li role="presentation" class="nav-item">
                                <a class="nav-link text-capitalize {f:if(condition:'{iteration.isFirst}', then:'active')}" href="#{i:format.noSpace(value:'category-{extensionKey}-{categoryName}')}" aria-controls="category-{extensionKey}-{categoryName}" role="tab" data-bs-toggle="tab">{categoryName}</a>
                            </li>
                        </f:if>
                    </f:for>
                </ul>

                <form action="#" name="configurationform" autocomplete="off" class="t3js-extensionConfiguration-form extensionConfiguration-form" data-extensionKey="{extensionKey}">
                    <div class="tab-content">
                        <f:for each="{extensionData.configuration}" as="subcategories" key="categoryName" iteration="iteration">
                            <div role="tabpanel" class="tab-pane {f:if(condition:'{iteration.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}" 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 for="em-{configurationItem.extensionKey}-{configurationItem.name}">
                                                    {configurationItem.labels.0}
                                                </label>
                                                <p>
                                                    {categoryName}.{configurationItem.name}
                                                    <f:if condition="{configurationItem.type} != 'user'">
                                                        <f:if condition="{configurationItem.type}">
                                                            ({configurationItem.type})
                                                        </f:if>
                                                    </f:if>
                                                </p>
                                                <div class="form-control-wrap">
                                                    <core:form.typoScriptConstants configuration="{configurationItem}"/>
                                                </div>
                                                <f:if condition="{configurationItem.labels.1}">
                                                    <div class="help-block">{configurationItem.labels.1 -> f:format.nl2br()}</div>
                                                </f:if>
                                            </div>
                                        </f:for>
                                    </div>
                                </f:for>
                            </div>
                        </f:for>
                    </div>
                    <button type="submit" class="btn btn-default" name="save">Save "{extensionKey}" configuration</button>
                </form>
            </div>
        </div>
    </div>
</div>

</html>
