{% import "_includes/forms" as forms %}
{{ tag('h1', {
    class: 'visually-hidden',
    text: 'Edit Image'|t('app'),
}) }}
<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>
        <div class="btngroup">
            <button type="button" class="focal-point btn icon leftalign" aria-pressed="false">{{ 'Focal Point'|t('app') }}</button>
        </div>
    </div>
    <div role="tabpanel" class="crop hidden" data-view="crop" data-crop="true" aria-labelledby="crop-tab">
        <div class="btngroup">
            <button type="button" class="focal-point btn icon leftalign">{{ 'Focal Point'|t('app') }}</button>
        </div>

        <fieldset class="orientation" aria-label="{{ 'Orientation'|t('app') }}">
            <input type="radio" aria-label="{{ 'Landscape'|t }}" name="orientation" value="landscape" checked/>
            <input type="radio" aria-label="{{ 'Portrait'|t }}"  name="orientation" value="portrait"/>
        </fieldset>

        {% 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,
        }) }}
    </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>