{namespace neos=Neos\Neos\ViewHelpers}
{namespace cm=CM\Neos\ThemeModule\ViewHelpers}

<div class="neos-content neos-container-fluid">

	<div class="container-fluid">
		<div class="row" style="padding-bottom: 1em; border-bottom: 1px solid #3f3f3f; margin-bottom: 1em;">
			<h1>{neos:backend.translate(id: 'headline', package: 'CM.Neos.ThemeModule')}</h1>
			<f:form action="index" method="get" class="neos-button-secondary">
			<p>{neos:backend.translate(id: 'select.targetPackage.label', package: 'CM.Neos.ThemeModule')}: <f:form.select id="targetPackageKeySelector" name="targetPackageKey" options="{availableSitePackages}" value="{settings.packageKey}"/></p>
			</f:form>
		</div>
		<f:form action="update" method="post" class="neos-button-primary" object="{settings}" name="settings">

			<f:for each="{themeSettings}" as="group" key="groupKey">
				<f:render section="group" arguments="{group: group, groupKey: groupKey, fonts: fonts}" />
			</f:for>

			<!-- Custom SCSS / CSS input -->
			<div class="row">
				<h2>{neos:backend.translate(id: 'textarea.scss.label', package: 'CM.Neos.ThemeModule')}</h2>
				<!-- Custom scss to append -->
				<f:form.textarea property="customScss" id="code-scss" rows="10" cols="70"/><br />
			</div>
			<div class="row">
				<h2>{neos:backend.translate(id: 'textarea.css.label', package: 'CM.Neos.ThemeModule')}</h2>
				<!-- Custom css code to append -->
				<f:form.textarea property="customCss" id="code-css" rows="10" cols="70" /><br />
			</div>

			<div class="row">
				<button type="submit" title="{neos:backend.translate(id: 'button.save', package: 'CM.Neos.ThemeModule')}" data-neos-toggle="tooltip"><i class="icon-refresh"></i> {neos:backend.translate(id: 'button.save', package: 'CM.Neos.ThemeModule')}</button>
			</div>
		</f:form>
	</div>
</div>

<f:section name="group">
	<div class="row">
		<div class="column">
			<h2>{group.label}</h2>
		</div>
	</div>
	<div class="row">
		<div class="column">
			<div class="group-settings">
				<f:for each="{group.type}" as="type" key="typeKey">
					<f:render section="element" arguments="{group: group, typeKey: typeKey, elements: type, groupKey: groupKey, fonts: fonts}" />
				</f:for>
			</div>
		</div>
	</div>
</f:section>


<f:section name="element">
	<f:if condition="{typeKey} == 'color'">
		<ul class="default-list color-list">
			<f:for each="{elements}" as="element" key="elementKey">
				<f:if condition="{element.value}">
					<li><f:render section="typeColor" arguments="{element: element, elementKey: elementKey, typeKey: typeKey, groupKey: groupKey}" /></li>
				</f:if>
			</f:for>
		</ul>
	</f:if>

	<f:if condition="{typeKey} == 'font'">
		<ul class="default-list font-list">
			<f:for each="{elements}" as="element" key="elementKey">
				<f:if condition="{element.value}">
					<li><f:render section="typeFont" arguments="{element: element, elementKey: elementKey, typeKey: typeKey, groupKey: groupKey, fonts:fonts}" /></li>
				</f:if>
			</f:for>
		</ul>
	</f:if>

	<f:if condition="{typeKey} == 'textfield'">
		<ul class="default-list textfield-list">
			<f:for each="{elements}" as="element" key="elementKey">
				<f:if condition="{element.value}">
					<li><f:render section="typeTextfield" arguments="{element: element, elementKey: elementKey, typeKey: typeKey, groupKey: groupKey}" /></li>
				</f:if>
			</f:for>
		</ul>
	</f:if>
</f:section>


<f:section name="typeColor">
	<div class="form-group">
		<label class="cm-neos-thememodule-headline" for="{elementKey}">{neos:backend.translate(id: 'input.customSettings.{element.label}.label', package: 'CM.Neos.ThemeModule', value: '{element.label}')}</label>
		<div class="input-group colorpicker-component custom-color">
			<f:form.textfield name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][value]" id="{elementKey}" class="form-control" value="{element.value}" /><span class="input-group-addon"><i></i></span>
		</div>
		<f:form.hidden name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][scssVariableName]" value="{element.scssVariableName}" />
	</div>
</f:section>

<f:section name="typeFont">
	<div class="form-group">
		<label class="cm-neos-thememodule-headline" for="{elementKey}">{neos:backend.translate(id: 'input.customSettings.{element.label}.label', package: 'CM.Neos.ThemeModule', value: '{element.label}')}</label>
		<div class="input-group custom-font">
			<f:if condition="{fonts.options}">
				<f:for each="{fonts.options}" as="optionsByCategory" key="optionsByCategoryKey">
					<f:if condition="{optionsByCategoryKey} == {element.category}">

						<f:form.select name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][value][family]" data="{category: element.category}" id="{elementKey}" class="cm-neos-thememodule-custom-font-family-selector" options="{optionsByCategory}" optionValueField="family" optionLabelField="family" value="{element.value.family}" />
						<f:form.hidden name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][scssVariableName]" class="form-control" value="{element.scssVariableName}" />

						<div class="input-group custom-textfield font-fallback-value">
							<label>{neos:backend.translate(id: 'select.font.fontFallbackValue', package: 'CM.Neos.ThemeModule')}</label>
							<f:form.textfield name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][fontFallbackValue]" class="form-control" value="{element.fontFallbackValue}" />
						</div>

						<div id="{elementKey}-root" class="font-extra-root" data-json-fonts="{optionsByCategory -> f:format.json()}">
							<f:form.hidden name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][value][variants]" class="cm-neos-thememodule-custom-font-family-hidden variants" value="{element.value.variants -> cm:format.json()}" />

							<!-- variants get rendered by js and hidden value get updated -->
							<div class="variants">
								<div class="jq-container" data-label="{neos:backend.translate(id: 'select.font.variants', package: 'CM.Neos.ThemeModule')}">

								</div>
							</div>

							<div class="subsets">
								<div class="jq-container" data-label="{neos:backend.translate(id: 'select.font.subsets', package: 'CM.Neos.ThemeModule')}">

								</div>
							</div>
						</div>
					</f:if>
				</f:for>
			</f:if>
		</div>
	</div>
</f:section>

<f:section name="typeTextfield">
	<div class="form-group">
		<label class="cm-neos-thememodule-headline" for="{elementKey}">{neos:backend.translate(id: 'input.customSettings.{element.label}.label', package: 'CM.Neos.ThemeModule', value: '{element.label}')}</label>
		<div class="input-group custom-textfield">
			<f:form.textfield name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][value]" id="{elementKey}" class="form-control" value="{element.value}" />
		</div>
		<f:form.hidden name="customSettings[{groupKey}][type][{typeKey}][{elementKey}][scssVariableName]" value="{element.scssVariableName}" />
	</div>
</f:section>