{% import "_includes/forms" as forms %}
{% set orientation = craft.app.locale.getOrientation() -%}
{% do view.registerTranslations('app', [
  'Original',
  'Square',
  'Unconstrained',
]) %}
{{ tag('h1', {
    class: 'visually-hidden',
    text: 'Edit Image'|t('app'),
}) }}

{% macro editButton(config) %}
    {% set id = config.id ?? null %}
    {% tag 'button' with {
        id: id,
        type: 'button',
        aria: {
            pressed: 'false',
        },
    }|merge(config.buttonAttributes ?? {}, recursive=true) %}
        {{ config.label }}
    {% endtag %}
{% endmacro %}

{% macro focalPointBtn() %}
    <div class="btngroup">
        <button type="button" class="focal-point btn icon leftalign" data-fabric-element="focalpoint" data-item-name="{{ 'Focal Point'|t('app') }}" aria-pressed="false">{{ 'Focal Point'|t('app') }}</button>
    </div>
{% endmacro %}

<div class="tabs">
    <ul role="tablist">
        <li id="rotate-tab" data-view="rotate" role="tab" tabindex="0" aria-selected="true"><i></i>{{ 'Rotate'|t('app') }}</li>
        <li id="crop-tab" data-view="crop" role="tab" tabindex="-1" aria-selected="false"><i></i>{{ 'Crop'|t('app') }}</li>
    </ul>
</div>
<div class="views">
    <div role="tabpanel" class="rotate hidden" data-view="rotate" data-rotate="true" aria-labelledby="rotate-tab">
        <div class="rotate-buttons btngroup">
            <button type="button" class="rotate-left btn icon leftalign">{{ 'Rotate Left'|t('app') }}</button>
            <button type="button" class="rotate-right btn icon leftalign">{{ 'Rotate Right'|t('app') }}</button>
        </div>
        <div class="flip-buttons btngroup">
            <button type="button" class="flip-vertical btn icon leftalign">{{ 'Flip Vertical'|t('app') }}</button>
            <button type="button" class="flip-horizontal btn icon leftalign">{{ 'Flip Horizontal'|t('app') }}</button>
        </div>
        {{ _self.focalPointBtn() }}
    </div>
    <div role="tabpanel" class="crop hidden" data-view="crop" data-crop="true" aria-labelledby="crop-tab">

        {{ forms.buttonGroupField({
            id: 'orientation',
            name: 'orientation',
            label: 'Orientation'|t('app'),
            value: 'landscape',
            options: [
                {
                    icon: 'image-landscape',
                    value: 'landscape',
                    attributes: {
                        title: 'Landscape'|t('app'),
                        aria: {
                            label: 'Landscape'|t('app'),
                        },
                    },
                },
                {
                    icon: 'image-portrait',
                    value: 'portrait',
                    attributes: {
                        title: 'Portrait'|t('app'),
                        aria: {
                            label: 'Portrait'|t('app'),
                        },
                    },
                },
            ],
        }) }}

        {% set constraintOptions = [] %}
        {% for label, ratio in craft.app.config.general.imageEditorRatios %}
            {% set constraintOptions = constraintOptions|merge([{
                value: ratio,
                label: label|t('app')
            }]) %}

            {% if loop.last %}
                {% set constraintOptions = constraintOptions|merge([{
                    value: 'custom',
                    label: 'Custom'|t('app')
                }]) %}
            {% endif %}
        {% endfor %}

        {{ forms.radioGroupField({
            label: 'Constraints'|t('app'),
            name: 'constraint',
            class: 'constraint-group',
            value: 'none',
            options: constraintOptions,
        }) }}

        {% set cropHandleBtns = [
            {
                label: orientation == 'ltr' ? 'Top-Left Handle'|t('app') : 'Top-Right Handle'|t('app'),
                handle: orientation == 'ltr' ? 'tl' : 'tr',
            },
            {
                label: 'Top Handle'|t('app'),
                handle: 't',
            },
            {
                label: orientation == 'ltr' ? 'Top-Right Handle'|t('app') : 'Top-Left Handle'|t('app'),
                handle: orientation == 'ltr' ? 'tr' : 'tl',
            },
            {
                label: orientation == 'ltr' ? 'Left Handle'|t('app') : 'Right Handle'|t('app'),
                handle: orientation == 'ltr' ? 'l' : 'r',
            },
            {
                label: orientation == 'ltr' ? 'Right Handle'|t('app') : 'Left Handle'|t('app'),
                handle: orientation == 'ltr' ? 'r' : 'l',
            },
            {
                label: orientation == 'ltr' ? 'Bottom-Left Handle'|t('app') : 'Bottom-Right Handle'|t('app'),
                handle: orientation == 'ltr' ? 'bl' : 'br',
            },
            {
                label: 'Bottom Handle'|t('app'),
                handle: 'b',
            },
            {
                label: orientation == 'ltr' ? 'Bottom-Right Handle'|t('app') : 'Bottom-Left Handle'|t('app'),
                handle: orientation == 'ltr' ? 'br' : 'bl',
            },
        ] %}

        {% set directionalButtons = [
            {
                label: 'Up'|t('app'),
                direction: 'up',
            },
            {
                label: orientation == 'ltr' ? 'Left'|t('app') : 'Right'|t('app'),
                direction: orientation == 'ltr' ? 'left' : 'right',
            },
            {
                label: 'Down'|t('app'),
                direction: 'down',
            },
            {
                label: orientation == 'ltr' ? 'Right'|t('app') : 'Left'|t('app'),
                direction: orientation == 'ltr' ? 'right' : 'left',
            },
        ] %}
        <div role="application">
            {{ _self.focalPointBtn() }}
            <fieldset data-cropper-edit>
                <legend>
                    {{ 'Edit {type}'|t('app', {
                        type: 'Cropping Rectangle'|t('app'),
                    }) }}
                </legend>
                <div id="move-icon-wrapper" style="display: none;">{{ iconSvg('up-down-left-right') }}</div>
                <div role="application">
                    <div>
                        {{ _self.editButton({
                            label: 'Cropping Rectangle'|t('app'),
                            id: 'cropper-handle',
                            buttonAttributes: {
                                data: {
                                    'edit-rectangle': true,
                                    'fabric-element': 'rectangle',
                                    'item-name': 'Cropping Rectangle'|t('app'),
                                },
                                class: ['cropper-edit__btn']
                            }
                        }) }}
                    </div>

                    <div>
                        {% for button in cropHandleBtns %}
                            {% if loop.index == 5 %}
                                <div></div>
                            {% endif %}
                            {{ _self.editButton({
                                label: button.label,
                                buttonAttributes: {
                                    data: {
                                        'edit-rectangle': true,
                                        'fabric-element': button.handle,
                                        'item-name': button.label,
                                    },
                                    class: ['cropper-edit__btn']
                                }
                            }) }}
                        {% endfor %}
                    </div>
                </div>
            </fieldset>
        </div>

    </div>
</div>
<div class="image-container">
    <div class="image">
        <canvas id="image-canvas">
        </canvas>
        <canvas id="cropping-canvas">
        </canvas>
    </div>
    <div class="image-tools hidden">
        <div data-view="transform" class="straightening">
            <div id="slide-rule" class="slide-rule" aria-label="{{ 'Rotate'|t('app') }}"></div>
        </div>
    </div>
</div>