<div class="tabs">
    <ul>
        <li data-view="rotate"><i></i>{{ 'Rotate'|t('app') }}</li>
        <li data-view="crop"><i></i>{{ 'Crop'|t('app') }}</li>
    </ul>
</div>
<div class="views">
    <div class="rotate hidden" data-view="rotate" data-rotate="true">
        <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">{{ 'Focal Point'|t('app') }}</button>
        </div>
    </div>
    <div class="crop hidden" data-view="crop" data-crop="true">
        <div class="btngroup">
            <button type="button" class="focal-point btn icon leftalign">{{ 'Focal Point'|t('app') }}</button>
        </div>

        <div class="constraint-buttons-container">
            <div class="btngroup constraint-buttons">
                {% for label, ratio in craft.app.config.general.imageEditorRatios %}
                    <div class="constraint {{ ratio matches '/^[0-9]*\\.[0-9]+$/' ? 'flip' : '' }}" data-constraint="{{ ratio }}">{{ label|t('app') }}</div>
                {% endfor %}
                <div class="constraint custom" data-constraint="custom">
                    <span class="custom-label">{{ 'Custom'|t}}</span>
                    <span class="custom-input hidden"><input type="text" class="custom-constraint-w" size="3" value="1"/> x <input type="text" class="custom-constraint-h" size="3" value="1"/></span>
                </div>
            </div>
        </div>

        <div class="orientation">
            <input type="radio" name="orientation" value="landscape" checked/>
            <input type="radio" name="orientation" value="portrait"/>
        </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"></div>
        </div>
    </div>
</div>
