{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="button"  label="Button" description="Legen Sie verschiedene Schaltflächen an" options="{group: 'Buttons', icon: '{f:uri.resource(path: \'Icons/Content/Button.png\')}', sorting: '1'}">
			<flux:form.sheet name="design_sheet" label="Design">
				<flux:field.select name="buttoncolor" label="Buttonfarbe setzen" default="color" items="{
					0:{0:'transparent mit hellem Rand', 1:'transparent-light'},
					5:{0:'transparent mit dunklem Rand', 1:'transparent-dark'},
					10:{0:'basisfarbe', 1:'color'},
					20:{0:'basisfarbe 2', 1:'color2'},
					30:{0:'rot', 1:'alert'},
					40:{0:'grün', 1:'success'},
					50:{0:'gelb', 1:'warning'},
					60:{0:'blau', 1:'default'},
					70:{0:'schwarz', 1:'black'},
					80:{0:'weiss', 1:'white'},
					90:{0:'hellgrau', 1:'lightgrey'},
					100:{0:'dunkelgrau', 1:'darkgrey'}
				}" />

				<flux:field.select name="buttonsize" label="Buttontyp setzen" default="" items="{
				0:{0:'tiny Button', 1:'tiny'},
				1:{0:'kleiner Button', 1:'small'},
				2:{0:'Standardbutton', 1:''},
				3:{0:'grosser Button', 1:'large'},
				4:{0:'Button über die volle Breite', 1:'expanded'}
			}" />
				<flux:field.select name="buttonposition" label="Buttonposition setzen" default="right-btn" items="{
					0:{0:'links', 1:'left-btn'},
					10:{0:'zentriert', 1:'center-btn'},
					20:{0:'rechts', 1:'right-btn'}
				}" />

				<flux:field.checkbox name="radius" label="runde Ecken" default="0" />
				<flux:field.checkbox name="round" label="abgerundeten Ecken" default="0" />
				<flux:field.checkbox name="shadow" label="Shatten" default="0" />
			</flux:form.sheet>

			<flux:form.sheet name="content_sheet" label="Content">
				<flux:field.input name="buttonlabel" label="Button-Text" />
				<flux:field.input name="buttonlink" label="Button-Link">
					<flux:wizard.link  activeTab="'pages'" blindLinkOptions="file, spec, folder, url, mail" />
				</flux:field.input>
			</flux:form.sheet>
		</flux:form>
	</f:section>
############################################################
	<f:section name="Preview">
	<div class="button-wrap" style="text-align: {f:if(condition:'{buttonposition}=="left-btn"',then:'left')} {f:if(condition:'{buttonposition}=="center-btn"',then:'center')} {f:if(condition:'{buttonposition}=="right-btn"',then:'right')}; ">
		<button width="100%">{buttonlabel}</button>
	</div>
	</f:section>
############################################################
	<f:section name="Main">
	<div class="button-wrap {buttonposition}">
		<f:link.page class="button {buttonsize} {buttoncolor} {f:if(condition:'{radius}',then:'radius')} {f:if(condition:'{round}',then:'round')} {f:if(condition:'{shadow}',then:'shadow')}" pageUid="{buttonlink}">{buttonlabel}</f:link.page>
	</div>
	</f:section>
############################################################
</div>
<!--
## TODO
- Typ des Links ermitteln und Mail, File usw. ermöglichen.

-->