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

<div class="modal-panel-main">
    <div id="t3js-crop-image-container" class="cropper-image-container">
        <f:image image="{image}" maxWidth="1000" maxHeight="1000" id="t3js-crop-image" additionalAttributes="{data-original-width: image.properties.width, data-original-height: image.properties.height}" />
    </div>
</div>
<div class="modal-panel-sidebar">
    <div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="false">
        <f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
            <div class="panel panel-default" data-crop-variant-container="{cropVariant.id}">
                <div class="panel-heading" role="tab">
                    <div class="panel-heading-row">
                        <button
                            class="panel-button t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
                            type="button"
                            data-bs-toggle="collapse"
                            data-bs-target="#cropper-collapse-{cropVariantIterator.cycle}"
                            aria-expanded="{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
                            aria-controls="cropper-collapse-{cropVariantIterator.cycle}"
                            data-crop-variant-id="{cropVariant.id}"
                            data-crop-variant
                            id="cropper-accordion-heading-{cropVariantIterator.cycle}"
                        >
                            <span class="caret"></span>
                            <div class="panel-title">{cropVariant.title -> f:translate(id: cropVariant.title)}</div>
                            <div class="cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
                                <img class="cropper-preview-thumbnail-image" src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
                                <div class="cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
                                    <img src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}" class="cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
                                    <div class="cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
                                </div>
                            </div>
                        </button>
                    </div>
                </div>
                <div
                    id="cropper-collapse-{cropVariantIterator.cycle}"
                    class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'show')}"
                    role="tabpanel"
                    aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}"
                    data-bs-parent="#accordion-cropper-variants"
                >
                    <div class="panel-body">
                        <form class="form">
                            <f:if condition="{cropVariant.allowedAspectRatios}">
                                <label class="form-label" for="ratio-{cropVariantIterator.cycle}">
                                    <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
                                </label>
                                <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons">
                                    <f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
                                        <label
                                            class="btn btn-default"
                                            data-method="setAspectRatio"
                                            data-bs-option="{ratio.id}"
                                            title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}"
                                        >
                                            <input
                                                class="visually-hidden"
                                                id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
                                                name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
                                                value="{cropVariant.id}"
                                                type="radio"
                                            />
                                            <span class="t3-js-ratio-title" data-ratio-id="{cropVariant.id}{ratio.id}">{ratio.title -> f:translate(id: ratio.title)}</span> <core:icon identifier="actions-check" size="small" />
                                        </label>
                                    </f:for>
                                </div>
                            </f:if>
                            <label><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
                            <div class="mb-3 t3js-cropper-info-crop"></div>
                            <button
                                class="btn btn-default"
                                name="reset"
                                data-crop-variant="{cropVariant -> f:format.json()}"
                                title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}"
                            >
                                <core:icon identifier="actions-refresh" size="small" />
                                {f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </f:for>
    </div>
</div>

</html>
