{# The calibration control as it appears in the VIEWER: a pencil beside the
   scale bar, and a popup behind it.

   Moved into OpenSeadragon's own container at init (views/scaleCalibration.js)
   and positioned against the scale bar's element on every refresh, because the
   scalebar plugin puts its bar at four fifths of the free width -- neither
   edge is fixed, so there is no CSS offset that stays beside it.

   Same data-roles as the inline form on the project edit page
   (_scale_calibration.html); one controller drives both, and it finds its
   parts inside its own root rather than by document id, so the two can share
   a page without colliding. #}
<div id="scale_calibration_float" class="scale-float" hidden>
    <button type="button" class="scale-float-pencil" data-role="edit"
            title="Set what one pixel is worth"
            aria-label="Set what one pixel is worth" aria-expanded="false">
        <span class="fas fa-pencil" aria-hidden="true"></span>
    </button>

    <div class="scale-float-popup" data-role="popup" hidden>
        <form data-role="form">
            <label class="scale-float-term" data-role="label">Microns per pixel</label>
            <div class="scale-calibration-row">
                {# `type=text` with inputmode=decimal, not type=number: a number
                   spinner in a field this size is two arrows nobody presses,
                   and a scroll over it silently changes the calibration. #}
                <input class="scale-calibration-input" data-role="input" type="text"
                       inputmode="decimal" autocomplete="off" spellcheck="false"
                       placeholder="0.325">
                <button type="submit" class="scale-calibration-apply" data-role="apply">
                    Set
                </button>
            </div>
            <p class="scale-calibration-hint" data-role="hint" role="status"></p>
            <button type="button" class="scale-float-clear" data-role="clear" hidden>
                Remove calibration
            </button>
        </form>
    </div>
</div>