<html
    xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers"
    xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
    data-namespace-typo3-fluid="true"
>

<div class="formengine-field-item t3js-formengine-field-item">

    {fieldInformation -> f:format.raw()}

    <div class="form-wizards-wrap">
        <div class="form-wizards-item-element">
            <f:if condition="{isAllowedFileExtension} && {image.properties.width}">
                <f:then>
                    <f:if condition="{config.readOnly}">
                        <f:else>
                            <div class="form-control-wrap">
                                <input
                                    type="hidden"
                                    id="{formEngine.field.id}"
                                    name="{formEngine.field.name}"
                                    value="{formEngine.field.value}"
                                    data-formengine-validation-rules="{formEngine.validation}"
                                />
                                <button
                                    class="btn btn-default t3js-image-manipulation-trigger"
                                    data-url="{wizardUri}"
                                    data-payload="{wizardPayload}"
                                    data-preview-url="{previewUrl}"
                                    data-severity="notice"
                                    data-modal-title="{f:render(partial: 'Form/ImageManipulationModalTitle', arguments: _all)}"
                                    data-image-uid="{image.uid}"
                                    data-crop-variants="{config.cropVariants -> f:format.json()}"
                                    data-button-preview-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.preview')}"
                                    data-button-dismiss-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}"
                                    data-button-save-text="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}"
                                    data-file-field="{config.file_field}"
                                    data-field="{formEngine.field.id}"
                                    data-sync-available="{f:if(condition: '{config.syncAvailable}', then: 'true', else: 'false')}"
                                >
                                    <core:icon identifier="actions-crop" size="small" />
                                    <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.open-editor"/>
                                </button>
                            </div>
                        </f:else>
                    </f:if>
                    <div class="row media-gallery__list mt-2">
                        <f:for each="{config.cropVariants}" as="cropVariant">
                            <div class="col-6 col-sm-4 col-md-3 media-gallery__item">
                                <p>
                                    <b><f:translate id="{cropVariant.title}" default="{cropVariant.title}" /></b><br/>
                                    <f:if condition="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}">
                                        <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>: <span class="t3js-image-manipulation-selected-ratio" data-crop-variant-id="{cropVariant.id}"><f:translate id="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" default="{cropVariant.allowedAspectRatios.{cropVariant.selectedRatio}.title}" /></span>
                                    </f:if>
                                </p>
                                <div
                                    class="t3js-image-manipulation-preview media-object"
                                    data-preview-height="150"
                                    data-crop-variant-id="{cropVariant.id}"
                                >
                                    <f:image
                                        image="{image}"
                                        crop="{formEngine.field.value}"
                                        cropVariant="{cropVariant.id}"
                                        maxHeight="150"
                                        class="thumbnail thumbnail-status"
                                        loading="lazy"
                                        additionalAttributes="{data-crop-variant: '{cropVariant -> f:format.json()}', data-crop-variant-id: cropVariant.id}"
                                    />
                                </div>
                            </div>
                        </f:for>
                    </div>
                </f:then>
                <f:else>
                    <div class="media-body">
                    <f:if condition="{image.properties.width}">
                        <f:then>
                            <p>
                                <em>
                                    <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.supported-types-message" /><br/>
                                    {config.allowedExtensions -> f:format.case(mode: 'upper')}
                                </em>
                            </p>
                        </f:then>
                        <f:else>
                            <div class="alert alert-info">
                                <h4>
                                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions"/>
                                </h4>
                                <p>
                                    <f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.no-image-dimensions-message"/>
                                </p>
                            </div>
                        </f:else>
                    </f:if>
                    </div>
                </f:else>
            </f:if>
        </div>

        <div class="form-wizards-item-aside form-wizards-item-aside--field-control">
            <div class="btn-group">
                {fieldControl -> f:format.raw()}
            </div>
        </div>

        <div class="form-wizards-item-bottom">
            {fieldWizard -> f:format.raw()}
        </div>
    </div>

</div>

</html>
