{namespace flux=Tx_Flux_ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
{namespace jkphl=Jkphl\JkphlBlog\ViewHelpers}

<f:layout name="Content" />

<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">

    <!-- Custom configuration options -->
    <f:section name="Configuration">
        <flux:flexform wizardTab="Blog" id="image" icon="{v:extension.path.resources(path: 'Icons/fluidcontent/image.png')}" description="Adds an image with some positioning / text flow options">
            <flux:flexform.field.file name="image" allowed="jpg,jpeg,png,gif" showThumbs="true"/>
            <flux:flexform.field.text name="caption" enableRichText="true" defaultExtras="richtext[bold|italic|link]:rte_transform[flag=rte_enabled|mode=ts_css]" />
            <flux:flexform.field.select name="style" items="{0: {0: 'image-normal', 1: 'Normal image'}, 1: {0: 'image-half', 1: 'Half-width image'}, 2: {0: 'image-outset', 1: 'Outset half-width image'}}" />
            <flux:flexform.field.checkbox name="shadow"/>
        </flux:flexform>
    </f:section>
        
    <!-- Display in the page backend module -->
    <f:section name="Preview">
        <table style="border-collapse:collapse">
            <tr>
                <th width="120" style="padding:0" rowspan="3"><jkphl:backend.image src="{image}" width="110" alt="{caption}"/></th>
                <th width="60" style="padding:0">Caption</th>
                <td style="padding:0"><f:format.html>{caption}</f:format.html></td>
            </tr>
            <tr>
                <th width="100" style="padding:0">Style</th>
                <td style="padding:0"><f:translate key="LLL:EXT:jkphl_blog/Resources/Private/Language/locallang.xlf:flux.image.fields.style.{style}"/></td>
            </tr>
            <tr>
                <th width="100" style="padding:0">Cast shadow</th>
                <td style="padding:0">{f:if(condition: '{shadow}', then: 'v', else: '-')}</td>
            </tr>
        </table>
    </f:section>
    
    <!-- Frontend rendering -->
    <f:section name="Main">
        <figure id="section-{record.uid}" class="image {style}">
            <img src="{image}" alt="{f:format.stripTags(value: caption)}"{f:if(condition: '{shadow}', then: ' class="shadow"')}/>
            <f:if condition="{caption}">
                <figcaption><f:format.html>{caption}</f:format.html></figcaption>
            </f:if>
        </figure>
    </f:section>

</div>