{namespace em=TYPO3\CMS\Extensionmanager\ViewHelpers}
<f:layout name="main" />

<f:section name="docheader-buttons">
	<f:be.buttons.icon uri="{f:uri.action(action:'index',controller:'List',additionalParams:{search:extension.key})}" icon="actions-view-go-back" title="{f:translate(key:'extConfTemplate.backToList')}" />
	<f:be.buttons.icon uri="javascript:document.configurationform.submit();" icon="actions-document-save" title="{f:translate(key:'LLL:EXT:lang/locallang_common.xlf:save')}" />
	<f:be.buttons.icon uri="#" icon="actions-document-save-close" title="{f:translate(key:'LLL:EXT:lang/locallang_common.xlf:saveAndClose')}" />
</f:section>

<f:section name="module-headline">
	<h1>
		<f:translate key="extConfTemplate.headline" />
		{extension.key}
	</h1>
</f:section>

<f:section name="Content">
	<div id="typo3-extension-configuration-forms">
		<div class="tabs">
			<ul>
				<f:for each="{configuration}" as="category" key="categoryNumber">
					<f:if condition="{category.name}">
						<li><a href="#category-{categoryNumber}">{category.name}</a></li>
					</f:if>
				</f:for>
			</ul>
			<f:form action="save" name="configurationform" class="validate">
				<f:form.hidden name="extensionKey" value="{extension.key}" />
				<f:for each="{configuration}" as="category" key="categoryNumber">
					<f:if condition="{category.name}">
						<div class="category" id="category-{categoryNumber}">
							<f:for each="{category.subcategories}" as="subcategory">
								<div class="subcategory">
									<f:if condition="{subcategory.label}">
										<f:then>
											<h3>{subcategory.label}</h3>
										</f:then>
										<f:else>
											<f:if condition="{category.subcategories->f:count()} > 1">
												<h3><f:translate key="extConfTemplate.other" /></h3>
											</f:if>
										</f:else>
									</f:if>
									<f:for each="{subcategory.items}" as="item">
										<div class="group">
											<h4>{item.labelHeadline} <span class="info">[{category.name}.{item.name}]</span></h4>
											<f:if condition="{item.labelText}">
												<label for="{item.name}">{item.labelText}</label>
											</f:if>
											<f:if condition="{item.highlight}">
												<span style="background:red; padding:1px 2px; color:#fff; font-weight:bold;">{item.highlight}</span>
											</f:if>
											<em:form.typoScriptConstants configuration="{item}" />
											<f:if condition="{item.type} != 'user'">
												<f:then>
													<f:alias map="{label: '{f:translate(key: \'extConfTemplate.type.{item.type}\')}'}">
														<f:if condition="{label}">
															<f:then>
																<span class="info">({label})</span>
															</f:then>
														</f:if>
													</f:alias>
												</f:then>
											</f:if>
										</div>
									</f:for>
								</div>
							</f:for>
							<f:if condition="{category.highlightText}">
								{category.highlightText->f:format.raw()}
							</f:if>
						</div>
					</f:if>
				</f:for>
			</f:form>
		</div>
	</div>
</f:section>
