{# Core's Rotate & Flip tool (server/core_tools.py), bound in
   views/viewTransformTools.js. NO HEADING OF ITS OWN, and no close: this is
   the body of the card core builds for an open tool, whose header already
   carries the name and the X -- and no eye, because turning the view draws
   nothing that could be hidden.

   Two lines. The first holds the quick choices: the four right angles as a
   segmented control, and the two mirrors as toggles beside it. The second is
   the fine one: the slider, whose `.plx-number` is the inline editable
   degrees, and a reset.

   Everything is painted from one state (services/viewTransform.js), so no
   two controls can disagree. The mirrors are on the SCREEN's axes --
   "horizontally" swaps left and right as you see it, at any angle -- and each
   keeps its own state: pressing one never changes the other or the angle.
   `aria-pressed` / `aria-checked` are the state; `.is-active` only draws it. #}
<section class="sidebar-section view-transform-panel" id="rotate_panel_section">
    <div class="view-transform-quick">
        <div class="cell-mode-control is-compact" id="rotate_quick_control"
             role="radiogroup" aria-label="Rotation">
            <div class="cell-mode-options">
                <button type="button" class="cell-mode-option" data-rotate-to="0" role="radio" aria-checked="false">0°</button>
                <button type="button" class="cell-mode-option" data-rotate-to="90" role="radio" aria-checked="false">90°</button>
                <button type="button" class="cell-mode-option" data-rotate-to="180" role="radio" aria-checked="false">180°</button>
                <button type="button" class="cell-mode-option" data-rotate-to="270" role="radio" aria-checked="false">270°</button>
            </div>
        </div>
        <div class="view-transform-flips" role="group" aria-label="Flip">
            <button type="button" class="view-transform-flip" id="flip_horizontal_button"
                    data-flip="flipH" aria-pressed="false"
                    title="Flip horizontally" aria-label="Flip horizontally">
                <span class="fas fa-left-right" aria-hidden="true"></span>
            </button>
            <button type="button" class="view-transform-flip" id="flip_vertical_button"
                    data-flip="flipV" aria-pressed="false"
                    title="Flip vertically" aria-label="Flip vertically">
                <span class="fas fa-up-down" aria-hidden="true"></span>
            </button>
        </div>
    </div>
    <div class="slider-auto-row">
        <div id="rotate_slider" class="sidebar-slider"></div>
        <button id="rotate_reset_button" class="slider-auto-button" type="button"
                title="Reset rotation" aria-label="Reset rotation">
            <span class="fas fa-rotate-left" aria-hidden="true"></span>
        </button>
    </div>
</section>