{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}
{namespace mot=TYPO3\CMS\Speciality\ViewHelpers}
<f:layout name="FCE" />
<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

	<f:section name="Configuration">
		<flux:flexform wizardTab="MOT-PARA" id="mot-imagelist" label="Liste avec images" description="Liste de paragraphes avec images" icon="../typo3conf/ext/speciality/Resources/Public/Backend/FCE/PARA-Simple.png">

			<flux:flexform.sheet name="display" label="Display">
				<flux:flexform.section name="items" label="Elements">
					<flux:flexform.object name="item" label="Element">
						<flux:flexform.field.input name="image" label="Image" eval="trim">
							<flux:flexform.field.wizard.link />
						</flux:flexform.field.input>
						<flux:flexform.field.input name="title" label="Titre" />
						<flux:flexform.field.text name="text" rows="4" label="Texte" />
						<flux:flexform.field.input name="link" label="Lien">
							<flux:flexform.field.wizard.link />
						</flux:flexform.field.input>
						<flux:flexform.field.input name="linktext" label="Texte du lien" />
						<flux:flexform.field.input name="linktitle" label="Titre du lien" />
						<flux:flexform.section name="bottomlinks" label="Liens">
							<flux:flexform.object name="link" label="Lien">
								<flux:flexform.field.input name="link" label="Lien">
									<flux:flexform.field.wizard.link />
								</flux:flexform.field.input>
								<flux:flexform.field.input name="text" label="Texte du lien" />
								<flux:flexform.field.input name="title" label="Titre du lien" />
							</flux:flexform.object>
						</flux:flexform.section>
					</flux:flexform.object>
				</flux:flexform.section>
			</flux:flexform.sheet>

		</flux:flexform>
	</f:section>

	<f:section name="Preview">
		<ul>
			<f:for each="{items}" as="item" iteration="iteration">
				<li>{item.item.title}</li>
			</f:for>
		</ul>
	</f:section>

	<f:section name="Main">
		<ul class="results-list">
			<f:for each="{items}" as="item">
				<li>
					<f:if condition="{item.item.image}">
						<f:if condition="{item.item.link}">
							<f:then>
								<mot:link.page pageUid="{item.item.link}" title="{item.item.linktitle}"><f:image src="{item.item.image}" title="{item.item.title}" alt="{item.item.title}" width="213c" height="213c" /></mot:link.page>
							</f:then>
							<f:else>
								<f:image src="{item.item.image}" title="{item.item.title}" alt="{item.item.title}" width="213c" height="213c" />
							</f:else>
						</f:if>
					</f:if>
					<div class="text">
						<f:if condition="{item.item.title}">
							<f:if condition="{item.item.link}">
								<f:then>
									<h3><mot:link.page pageUid="{item.item.link}" title="{item.item.linktitle}">{item.item.title}</mot:link.page></h3>
								</f:then>
								<f:else>
									<h3>{item.item.title}</h3>
								</f:else>
							</f:if>
						</f:if>
						<p>{item.item.text}</p>
						<f:if condition="{item.item.bottomlinks}">
							<ul>
								<f:for each="{item.item.bottomlinks}" as="bottomlink" iteration="iteration">
									<li><mot:link.page pageUid="{bottomlink.link.link}" title="{bottomlink.link.title}">{bottomlink.link.text}</mot:link.page></li>
								</f:for>
							</ul>
						</f:if>
					</div>
				</li>
			</f:for>
		</ul>
	</f:section>
</div>