<!-- axes calibration -->
<div id="axes-calibration-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Axes Calibration") }}</p>
    <p>{{ _("Click points to select and use cursor keys to adjust positions. Use Shift+Arrow for faster movement. Click complete when finished.") }}</p>
    <p align="center"><input type="button" value="{{ _("Complete!") }}" style="width: 120px;" onclick="wpd.alignAxes.getCornerValues();" /></p>
</div>

<!-- acquire data -->
<div id="acquireDataSidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Manual Extraction") }}</p>
    <p>
        <input type="button" value="{{ _("Add Point") }} (A)" onclick="wpd.acquireData.manualSelection();" style="width:115px;" id="manual-select-button">
        <input type="button" value="{{ _("Adjust Point") }} (S)" onClick="wpd.acquireData.adjustPoints();" style="width: 115px;" id="manual-adjust-button">
    </p>
    <p>
        <input type="button" value="{{ _("Delete Point") }} (D)" onclick="wpd.acquireData.deletePoint();" style="width: 115px;" id="delete-point-button">
        <input type="button" value="{{ _("Edit Labels") }} (E)" id="edit-data-labels" onclick="wpd.acquireData.editLabels();" style="display: none; width: 115px;">
    </p>
    <br />
    <p class="sidebar-title">{{ _("Automatic Extraction") }}</p>
    <p>{{ _("Mask") }} <input type="button" value="{{ _("Box") }}" style="width:50px;" onclick="wpd.dataMask.markBox();" id="box-mask"><input type="button" value="{{ _("Pen") }}" style="width:45px;" onClick="wpd.dataMask.markPen();" id="pen-mask"><input type="button" value="{{ _("Erase") }}" style="width:50px;" onClick="wpd.dataMask.eraseMarks();" id="erase-mask"><input type="button" value="{{ _("View") }}" style="width:40px;" onclick="wpd.dataMask.viewMask();" id="view-mask" /></p>
    <div id="mask-erase-container" class="sidebar-extras">
        <p align="center">{{ _("Width") }} <input type="range" id="eraseThickness" min="1" max="150" value="20" style="width:80px;"> <input type="button" id="clearMaskBtn" value="{{ _("Erase All") }}" style="width:80px;" onclick="wpd.dataMask.clearMask();" /></p>
    </div>
    <div id="mask-paint-container" class="sidebar-extras">
        <p align="center">{{ _("Width") }} <input type="range" id="paintThickness" min="1" max="150" value="20" style="width:120px;"></p>
    </div>
    <hr />
    <p>{{ _("Color") }} <select id="color-detection-mode-select" onchange="wpd.colorPicker.changeDetectionMode();">
            <option value="fg">{{ _("Foreground Color") }}</option>
            <option value="bg">{{ _("Background Color") }}</option>
        </select><input type="button" id="color-button" value=" " onclick="wpd.colorPicker.startPicker();" style="width: 25px;" title="{{ _("Click to change color") }}" /></p>
    <p>{{ _("Distance") }} <input type="text" size="3" id="color-distance-value" onchange="wpd.colorPicker.changeColorDistance();" />
        <input type="button" value="{{ _("Filter Colors") }}" onclick="wpd.colorPicker.testColorDetection();" style="width: 90px;">
    </p>
    <hr />
    <p>{{ _("Algorithm") }}
        <select id="auto-extract-algo-name" onchange="wpd.algoManager.applyAlgoSelection();"></select>
    </p>
    <div id="algo-parameter-container" style="margin-left: 10px; margin-top: 5px;"></div>
    <p style="margin-top: 5px;">
        <input type="button" value="{{ _("Run") }}" style="width:40px;" onclick="wpd.algoManager.run();" />
    </p>
    <div id="point-groups-controls" hidden>
        <br />
        <p class="sidebar-title">{{ _("Point Groups") }}</p>
        <p>Current Tuple: <span id="current-point-tuple-index" style="font-weight: bold;"></span></p>
        <p>Current Group: <span id="current-point-group-name" style="font-weight: bold;"></span></p>
        <p>
            <input type="button" value="{{ _("Prev Group") }} (,)" onclick="wpd.pointGroups.previousGroup();" style="width: 115px;">
            <input type="button" value="{{ _("Next Group") }} (.)" onclick="wpd.pointGroups.nextGroup();" style="width: 115px;">
        </p>
    </div>
    <div id="value-overrides-controls" hidden>
        <br />
        <p class="sidebar-title">{{ _("Overrides") }}</p>
        <p>
            <input type="button" value="{{ _("Override Values") }} (R)" id="override-data-values" style="width: 140px;">
            <span id="overridden-data-indicator" hidden>&#8682;</span>
        </p>
    </div>
</div>

<!-- edit image -->
<div id="editImageToolbar" class="sidebar">
    <p align="center"><b>{{ _("Edit Image") }}</b></p>
    <p align="center"><input type="button" value="H. Flip" style="width: 75px;" onclick="hflip();"><input type="button" value="V. Flip" style="width: 75px;" onClick="vflip();"></p>
    <p align="center"><input type="button" value="Crop" style="width: 150px;" onclick="cropPlot();"></p>
    <p align="center"><input type="button" value="Restore" style="width: 150px;" onclick="restoreOriginalImage();"></p>
    <p align="center"><input type="button" value="Save .PNG" style="width: 150px;" onclick="savePNG();"></p>
</div>

<!-- distance measurement -->
<div id="measure-distances-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Measure Distances") }}</p>
    <p>
        <input type="button" value="{{ _("Add Pair") }} (A)" style="width: 115px;" id="add-pair-button" onclick="wpd.measurement.addItem();" />
        <input type="button" value="{{ _("Delete Pair") }} (D)" style="width: 115px;" id="delete-pair-button" onclick="wpd.measurement.deleteItem();" />
    </p>
</div>

<!-- angle measurement -->
<div id="measure-angles-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Measure Angles") }}</p>
    <p>
        <input type="button" value="{{ _("Add Angle") }} (A)" style="width: 115px;" id="add-angle-button" onclick="wpd.measurement.addItem();" />
        <input type="button" value="{{ _("Delete Angle") }} (D)" style="width: 115px;" id="delete-angle-button" onclick="wpd.measurement.deleteItem();" />
    </p>
</div>

<!-- distance measurement -->
<div id="measure-area-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Measure Area/Perimeter") }}</p>
    <p align="center"><input type="button" value="{{ _("Add Polygon") }} (A)" style="width: 145px;" id="add-polygon-button" onclick="wpd.measurement.addItem();" /></p>
    <p align="center"><input type="button" value="{{ _("Delete Polygon") }} (D)" style="width: 145px;" id="delete-polygon-button" onclick="wpd.measurement.deleteItem();" /></p>
    <br />
    <p><span id="add-polygon-info">{{ _("Press Enter or Esc key to complete the polygon") }}</span></p>
</div>


<!-- open path measurement -->
<div id="measure-open-path-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Measure Path") }}</p>
    <p>
        <input type="button" value="{{ _("Add Path") }} (A)" style="width: 115px;" id="add-open-path-button" onclick="wpd.measurement.addItem();" />
        <input type="button" value="{{ _("Delete Path") }} (D)" style="width: 115px;" id="delete-open-path-button" onclick="wpd.measurement.deleteItem();" />
    </p>
</div>

<!-- closed path measurement -->
<div id="measure-closed-path-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Measure Closed Path") }}</p>
    <p>
        <input type="button" value="{{ _("Add Path") }} (A)" style="width: 115px;" id="add-closed-path-button" onclick="wpd.measurement.addItem();" />
        <input type="button" value="{{ _("Delete Path") }} (D)" style="width: 115px;" id="delete-closed-path-button" onclick="wpd.measurement.deleteItem();" />
    </p>
</div>

<!-- grid detection -->
<div id="grid-detection-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Detect Grid") }}</p>
    <p>
        {{ _("Mask") }}
        <input type="button" value="{{ _("Box") }}" style="width: 60px;" id="grid-mask-box" onclick="wpd.gridDetection.markBox();" />
        <input type="button" value="{{ _("Clear") }}" style="width: 60px;" id="grid-mask-clear" onclick="wpd.gridDetection.clearMask();" />
        <input type="button" value="{{ _("View") }}" style="width: 60px;" id="grid-mask-view" onclick="wpd.gridDetection.viewMask();" />
    </p>
    <hr />
    <p>
        {{ _("Color") }}
        <input type="button" value="{{ _("Pick") }}" style="width: 60px;" id="grid-color-picker-button" onclick="wpd.gridDetection.startColorPicker();" />
        <input type="text" value="10" style="width: 60px;" id="grid-color-distance" onchange="wpd.gridDetection.changeColorDistance();" />
        <input type="button" value="{{ _("Test") }}" style="width: 60px;" id="grid-color-test" onclick="wpd.gridDetection.testColor();" />
    </p>
    <p align="center"><input type="checkbox" id="grid-background-mode" checked onchange="wpd.gridDetection.changeBackgroundMode();" /> {{ _("Background Mode") }}</p>
    <hr />
    <table>
        <tr>
            <td align="right">{{ _("Horizontal") }} </td>
            <td><input type="checkbox" id="grid-horiz-enable" checked /></td>
        </tr>
        <tr>
            <td align="right">{{ _("X%") }} </td>
            <td>&nbsp; <input type="text" value="80" id="grid-horiz-perc" style="width: 40px;" /></td>
        </tr>
        <tr>
            <td align="right">{{ _("Vertical") }} </td>
            <td><input type="checkbox" id="grid-vert-enable" checked /></td>
        </tr>
        <tr>
            <td align="right">{{ _("Y%") }} </td>
            <td>&nbsp; <input type="text" value="80" id="grid-vert-perc" style="width: 40px;" /></td>
        </tr>
    </table>
    <hr />
    <p align="center">
        <input type="button" value="{{ _("Detect") }}" style="width: 100px;" onclick="wpd.gridDetection.run();" />
        &nbsp;
        <input type="button" value="{{ _("Reset") }}" style="width: 100px;" onclick="wpd.gridDetection.reset();" />
    </p>
</div>

<!-- startup sidebar -->
<div id="start-sidebar" class="sidebar">
    <p class="sidebar-title">WebPlotDigitizer {{ wpdVersion }}</p>
    <br />
    <center>
        <p><input type="button" value="{{ _("Load Image") }}" style="width: 180px;" onclick="wpd.popup.show('loadNewImage');" /></p>
        <p><input type="button" value="{{ _("Tutorial Video") }}" style="width: 180px;" onclick="window.open('https://youtu.be/P7GbGdMvopU','_blank');" /></p>
        <p><input type="button" value="{{ _("Visit Website") }}" style="width: 180px;" onclick="window.open('https://automeris.io/WebPlotDigitizer.html','_blank');" /></p>
        <p><input type="button" value="{{ _("Visit GitHub") }}" style="width: 180px;" onclick="window.open('https://github.com/automeris-io/WebPlotDigitizer','_blank');" /></p>
    </center>
</div>

<!-- image editing sidebar -->
<div id="image-editing-sidebar" class="sidebar">
    <p class="sidebar-title">{{ _("Image Editing") }}</p>
    <br />
    <center>
        <p align="center">
            <input type="button" value="{{ _("Undo") }}" style="width: 120px;" onclick="wpd.imageEditing.undo()" id="image-editing-undo" />
            <input type="button" value="{{ _("Redo") }}" style="width: 120px;" onclick="wpd.imageEditing.redo()" id="image-editing-redo" />
        </p>
        <br />
        <p align="center">
            <input type="button" value="{{ _("Crop") }}" style="width: 120px;" onclick="wpd.imageEditing.startImageCrop()" id="image-editing-crop" />
            <!-- <input type="button" value="{{ _("Fix Perspective") }}" style="width: 120px;" onclick="wpd.imageEditing.startPerspective()" id="image-editing-perspective" /> -->
        </p>
        <!--
        <p align="center">
            <input type="button" value="{{ _("Rotate") }}" style="width: 120px;" onclick="" id="image-editing-rotate" />
            <input type="button" value="{{ _("?") }}" style="width: 120px;" onclick="" id="image-editing-misc" />
        </p>
        -->
        <p><span id="image-editing-crop-info">Click and drag to mark the crop region. Press Enter to complete cropping, Esc to cancel</span></p>
    </center>
</div>