{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<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">

	<f:layout name="Content" />
	############################################################
	<f:section name="Configuration">
		<flux:form id="grid"  label="Grids" description="Strukturieren Sie Ihre Inhalte mit den Grids" options="{group: 'Struktur', icon: '{f:uri.resource(path: \'Icons/Content/Grid.png\')}', sorting: 1}">

			<flux:form.sheet name="design_sheet" label="Design">
				<flux:field.select name="colorsheme" label="Farbschema auswählen" default="white" items="{
					0:{0:'transparent', 1:'transparent'},
					10:{0:'farbig', 1:'color'},
					20:{0:'farbig 2', 1:'color2'},
					30:{0:'schwarz', 1:'black'},
					40:{0:'dunkelgrau', 1:'darkgrey'},
					50:{0:'grau', 1:'grey'},
					60:{0:'hellgrau', 1:'lightgrey'},
					70:{0:'weiss', 1:'white'},
					80:{0:'browngreen', 1:'brown_green'}
				}" />

				<flux:field.select name="gridtype" label="Gridtyp bestimmen" default="fluid-grid" items="{
					0:{0:'Fluides Grid', 1:'fluid-grid'},
					10:{0:'Boxed Grid', 1:'boxed-grid'}
				}" />

				<flux:field.input name="paddingTop" label="Abstand oben" default="50" />
				<flux:field.input name="paddingBottom" label="Abstand unten" default="50" />

				<flux:field.input name="grid_classes" label="Additional classes" default="" />
			</flux:form.sheet>

			<flux:form.sheet name="parallax_sheet" label="Background">
				<flux:field.inline.fal name="grid.bgImage" label="Hintergrund-Bild" maxItems="1" minItems="0" />

			</flux:form.sheet>

			<flux:form.sheet name="content_sheet" label="Content">
				<flux:field.text name="gridtext_before" label="Textblock vor Grid" enableRichText="1"/>
				<flux:field.text name="gridtext_after" label="Textblock nach Grid" enableRichText="1"/>
			</flux:form.sheet>


			<flux:form.sheet name="responsive_sheet" label="Responsive">
				<flux:field.checkbox name="hideOnL" label="Verstecken auf Desktops" default="0" />
				<flux:field.checkbox name="hideOnM" label="Verstecken auf Tablets" default="0" />
				<flux:field.checkbox name="hideOnS" label="Verstecken auf Smartphones" default="0" />
			</flux:form.sheet>

			<flux:form.sheet name="grid_sheet" label="Grid-Layout">
				<flux:form.section name="grids" label="Grids anlegen">
					<flux:form.object name="grid" label="Grid">
						<flux:field.select name="large" items="12,11,10,9,8,7,6,5,4,3,2,1" label="Gridgrösse auf Desktops" default="6"/>
						<flux:field.select name="medium" items="12,11,10,9,8,7,6,5,4,3,2,1" label="Gridgrösse auf Tablets" default="6"/>
						<flux:field.select name="small" items="12,11,10,9,8,7,6,5,4,3,2,1" label="Gridgrösse auf Smartphones" default="6"/>
						<flux:field.select name="offset" items="0,1,2,3,4,5,6,7,8,9,10,11" label="Offset bei Desktops" default="0"/>
						<flux:field.input name="style" label="Style" default="" />
						<flux:field.input name="addition_classes" label="Additional classes" default="" />
						<flux:field.input name="style_wrapper" label="Style Wrapper" default="" />
					</flux:form.object>
				</flux:form.section>

				<flux:grid>
					<flux:grid.row>
						<f:for each="{grids}" as="gridObject" iteration="iteration">
							<flux:grid.column name="grids{iteration.cycle}" label="{percent}%" />
						</f:for>
					</flux:grid.row>
				</flux:grid>

			</flux:form.sheet>

		</flux:form>
	</f:section>
	############################################################
	<f:section name="Preview">
		<flux:grid />
	</f:section>
	############################################################
	<f:section name="Main">
		{v:content.resources.fal(field: 'grid.bgImage') -> v:iterator.first() -> v:variable.set(name: 'bgImage')}
		<div class="grids {gridtype} {gridalign} {colorsheme} {grid_classes} {f:if(condition:'{hideOnL}',then:'hide-for-large-up')} {f:if(condition:'{hideOnL}',then:'hide-for-large-up')} {f:if(condition:'{hideOnM}',then:'hide-for-medium-only')}"  {f:if(condition:'{bgImage}',then:'style=\'background:url({bgImage.url});background-repeat: no-repeat no-repeat;background-size: cover;\'')}>
		<div class="container " style="padding-top:{paddingTop}px;padding-bottom:{paddingBottom}px;">
			<div class="row">
				<f:if condition="{gridtext_before}"><div class="col-sm-12 columns textbeforegrids"><f:format.raw>{gridtext_before}</f:format.raw></div></f:if>
				<f:for each="{grids}" as="gridObject" iteration="iteration">
					<div class="col-lg-{gridObject.grid.large} col-md-{gridObject.grid.medium} col-sm-{gridObject.grid.small} {f:if(condition:'{gridObject.grid.offset} > 0',then:'offset-lg-{gridObject.grid.offset}')} columns {f:if(condition:'{iteration.isLast}',then:'end')} {gridObject.grid.addition_classes}" style="{gridObject.grid.style}">
						<div class="mg-col-wrapper" style="{gridObject.grid.style_wrapper}">
							<flux:content.render area="grids{iteration.cycle}" />
						</div>
					</div>
				</f:for>
				<f:if condition="{gridtext_after}"><div class="col-md-12 columns textbeforegrids"><f:format.raw>{gridtext_after}</f:format.raw></div></f:if>
			</div>
		</div>
</div>
</f:section>
############################################################
</div>