<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
	 xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
	 xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
	 xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

	<f:layout name="Content"/>

	<f:section name="Configuration">
		<flux:form id="button">
			<flux:form.option.icon value="EXT:fluidbootstrap/Resources/Public/Icons/Content/Button.png"/>
			<flux:form.option.group value="fluxcontent"/>
			<flux:form.sheet name="ButtonSheetOne" label="Einstellungen">
				<flux:field.select items="{settings.buttonStyles}"
								   name="settings.ButtonStyleGlobal" label="Buttons Style global (gilt für alle Buttons, kann überschrieben werden)"/>
				<flux:field.select items="none, {settings.textColorClasses}"
								   name="settings.ButtonTextColor" label="Buttons Textfarbe global (gilt für alle Buttons, kann überschrieben werden, bei none gilt Button Style)"/>
				<flux:field.select label="Größe der Buttons"
								   items="{
                                           0:{0:'klein', 1:'sm'},
                                           1:{0:'standard', 1:'default'},
                                           2:{0:'groß', 1:'lg'}}" name="settings.ButtonSize" default="default"/>
				<flux:field.select label="Ausrichtung" items="{
                                           0:{0:'links', 1:'start'},
                                           1:{0:'mitte', 1:'center'},
                                           2:{0:'rechts', 1:'end'}}" name="settings.ButtonPosition" default="start"/>

				<flux:field.select name="settings.ButtonDirection"
								   label='Anordnung'
								   items="{
								   0:{0:'nebeneinander', 1: 'd-block'},
								   1:{0:'untereinander', 1: 'd-grid'}}"/>
				<flux:field.checkbox name="settings.ButtonW100" default="0" label="Setze Buttons auf 100% Breite (abhängig vom Elternelement)" />
				<flux:field.select name="settings.ButtonShadowGlobal" label="Buttons mit Schatten global (gilt für alle Buttons, kann überschrieben werden)"
								   items="{
										   0:{0:'ja',1:'btn-shadow'},
										   1:{0:'nein',1:'btn-shadow-none'}
										   }"
								   default="{f:if(condition: '{settings.buttonDefaultShadow}', then:'btn-shadow', else: 'btn-shadow-none')}" />
				<flux:field.select name="settings.ButtonRoundGlobal" label="Buttons mit runden Ecken global (gilt für alle Buttons, kann überschrieben werden)"
								   items="{
										   0:{0:'ja',1:'btn-round'},
										   1:{0:'nein',1:'btn-round-none'}
										   }"
								   default="{f:if(condition: '{settings.buttonDefaultRound}', then:'btn-round', else: 'btn-round-none')}" />
			</flux:form.sheet>
			<flux:form.sheet name="ButtonSheetTwo" label="Buttons">
				<flux:form.section name="ButtonSection">
					<flux:form.object name="ButtonObject" label="Button">
						<flux:field.input name="ButtonText" label="Text"/>
						<flux:field.input name="link" label="Link" config="{renderType: 'inputLink'}" required="true"/>
						<flux:field.select items="global, {settings.buttonStyles}"
										   name="ButtonOptions" label="Button Style (überschreibt globalen Wert)"/>
						<flux:field.select items="global, none, {settings.textColorClasses}"
										   name="ButtonTextColor" label="Button Textfarbe (überschreibt globalen Wert)"/>
						<flux:field.select items="global, none, {settings.textColorClasses}"
										   name="ButtonIconColor"
										   label="Button Iconfarbe (überschreibt globalen Wert)"/>
						<flux:field.select name="ButtonRound" label="Button mit runden Ecken (überschreibt globalen Wert)"
										   items="{
										   0:{0:'global',1:'global'},
										   1:{0:'ja',1:'btn-round'},
										   2:{0:'nein',1:'btn-round-none'}
										   }"
										   default="global" />
						<flux:field.select name="ButtonShadow" label="Button mit Schatten (überschreibt globalen Wert)"
										   items="{
										   0:{0:'global',1:'global'},
										   1:{0:'ja',1:'btn-shadow'},
										   2:{0:'nein',1:'btn-shadow-none'}
										   }"
										   default="global" />
						<flux:field.checkbox name="ButtonActive" default="0" label="Link deaktivieren"/>
						<flux:field.input name="Classes" label="Zusätzliche Klassen"/>
					</flux:form.object>
				</flux:form.section>
			</flux:form.sheet>
			<flux:form.sheet name="ButtonSheetThree" label="Einstellungen Icon">
				<flux:field.checkbox name="settings.ButtonWithIcon" label="Aktiviere Icon in Buttons" requestUpdate="true"/>
				<flux:field.select name="settings.ButtonIconJustify"
								   label="Icon Position horizontal"
								   displayCond="FIELD:settings.ButtonWithIcon:=:1"
								   items="{
								   0:{0:'links', 1:'btn-icon-left'},
								   1:{0:'rechts', 1:'btn-icon-right'}
								   }"/>
				<flux:field.select name="settings.ButtonIconAlign"
								   label="Icon Position vertikal"
								   displayCond="FIELD:settings.ButtonWithIcon:=:1"
								   items="{
								   0:{0:'oben', 1:'align-items-start'},
								   1:{0:'mitte', 1:'align-items-center'},
								   2:{0:'unten', 1:'align-items-end'}
								   }"/>
				<flux:field.checkbox name="settings.ButtonAnimatedIcon" label="Aktiviere Icon Animation" displayCond="FIELD:settings.ButtonWithIcon:=:1"/>
				<flux:field.select items="none, {settings.textColorClasses}"
								   name="settings.ButtonIconColor"
								   displayCond="FIELD:settings.ButtonWithIcon:=:1"
								   label="Buttons Iconfarbe global (gilt für alle Buttons, kann überschrieben werden)"/>
			</flux:form.sheet>
			<flux:form.sheet name="viewSettings" label="Anzeige Einstellungen">
				<flux:field.checkbox name="showOnMobile" default="1" label="Zeige Element auf Handy (mobile)"/>
				<flux:field.checkbox name="showOnTablet" default="1" label="Zeige Element auf Tablets (Hochformat)"/>
				<flux:field.checkbox name="showOnTabletLandscape" default="1" label="Zeige Element auf Tablets (Quervormat)"/>
				<flux:field.checkbox name="showOnDesktop" default="1" label="Zeige Element auf Desktops"/>
				<flux:field.checkbox name="showOnDesktopXl" default="1" label="Zeige Element auf Desktops (ab 1440px Breite)"/>
				<flux:field.checkbox name="showOnDesktopXxl" default="1" label="Zeige Element auf Desktops (ab 1600px Breite)"/>
				<flux:field.checkbox name="showOnDesktopXxxl" default="1" label="Zeige Element auf Desktops (ab 1900px HD)"/>
			</flux:form.sheet>
		</flux:form>
	</f:section>

	<f:section name="Preview">
		<div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
			<strong>Button / Buttons</strong>
			<p>
				<i>Anzeige:</i>
				Mobil:<span style="font-size: 16px;"><f:if condition="{showOnMobile}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
				Tablet:<span style="font-size: 16px;"><f:if condition="{showOnTablet}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else> </f:if></span> |
				Tablet(landscape):<span style="font-size: 16px;"><f:if condition="{showOnTabletLandscape}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
				Desktop:<span style="font-size: 16px;"><f:if condition="{showOnDesktop}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
				Desktop (1440px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span>|
				Desktop (1600px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXxl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span> |
				Desktop (1900px):<span style="font-size: 16px;"><f:if condition="{showOnDesktopXxxl}"><f:then>&#10004;</f:then><f:else>&#10006;</f:else></f:if></span><br/>
			</p>
		</div>
		<v:condition.type.isArray value="{ButtonSection}">
			<f:then>
				<f:for each="{ButtonSection}" as="ButtonObjectItem" iteration="iter">
					<div style="background-color:#efefef; margin-bottom: 10px; padding: 10px;">
						<i>Text:</i> {ButtonObjectItem.ButtonObject.ButtonText} |
						<i>Style:</i> {ButtonObjectItem.ButtonObject.ButtonOptions} |
						<i>Link aktiv:</i> <f:if condition="{ButtonObjectItem.ButtonObject.ButtonActive}"><f:then>nein</f:then><f:else>ja</f:else></f:if> |
						<f:if condition="{ButtonObjectItem.ButtonObject.link}">
							<i>Link Ziel:</i> {ButtonObjectItem.ButtonObject.link}
						</f:if>
					</div>
				</f:for>
			</f:then>
			<f:else>
				<p style="color: red"><b>Bitte mindestens einen Button erstellen.</b></p>
			</f:else>
		</v:condition.type.isArray>
	</f:section>

	<f:section name="Main">
		<f:if condition="{showOnMobile}">
			<f:then>
				<v:variable.set name="settings.displayMobile" value='d-sm-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayMobile" value='d-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnTablet}">
			<f:then>
				<v:variable.set name="settings.displayTablet" value='d-md-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayTablet" value='d-md-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnTabletLandscape}">
			<f:then>
				<v:variable.set name="settings.displayTabletLandscape" value='d-lg-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayTabletLandscape" value='d-lg-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnDesktop}">
			<f:then>
				<v:variable.set name="settings.displayDesktop" value='d-xl-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayDesktop" value='d-xl-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnDesktopXl}">
			<f:then>
				<v:variable.set name="settings.displayDesktopXl" value='d-xxl-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayDesktopXl" value='d-xxl-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnDesktopXxl}">
			<f:then>
				<v:variable.set name="settings.displayDesktopXxl" value='d-xxxl-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayDesktopXxl" value='d-xxxl-none'/>
			</f:else>
		</f:if>
		<f:if condition="{showOnDesktopXxxl}">
			<f:then>
				<v:variable.set name="settings.displayDesktopXxxl" value='d-xxxxl-flex'/>
			</f:then>
			<f:else>
				<v:variable.set name="settings.displayDesktopXxxl" value='d-xxxxl-none'/>
			</f:else>
		</f:if>
		<f:render partial="Content/Button/Standard" section="Element" arguments="{_all}"/>
	</f:section>

</div>