<!-- Background curtain for popups -->
<div id="shadow" style="width:100%; height:100%; background-color: rgba(0,0,0,0.3); position:absolute; top:0px; left:0px; z-index:50; visibility:hidden;">
</div>

<!-- Load Image -->
<div id="loadNewImage" class="popup" style="width: 400px;">
    <div class="popupheading">{{ _("Load Image File(s)") }}</div>
    <p>&nbsp;</p>
    <p align="center"><input type="file" id="fileLoadBox" multiple onchange="wpd.imageManager.load();" /></p>
    <p>&nbsp;</p>
    <p align="center">
        <input type="button" value="{{ _("Load") }}" onclick="wpd.imageManager.load();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('loadNewImage');" />
    </p>
</div>

<!-- Zoom Settings -->
<div id="zoom-settings-popup" class="popup" style="width: 300px;">
    <div class="popupheading">{{ _("Magnified View Settings") }}</div>
    <p>&nbsp;</p>
    <center>
        <table>
            <tr>
                <td>
                    <p>{{ _("Magnification") }}: </p>
                </td>
                <td>
                    <p><input type="text" id="zoom-magnification-value" size="3" />{{ _("Times") }}</p>
                </td>
            </tr>
            <tr>
                <td>
                    <p>{{ _("Crosshair Color") }}: </p>
                </td>
                <td>
                    <p>
                        <select id="zoom-crosshair-color-value">
                            <option value="black">{{ _("Black") }}</option>
                            <option value="red">{{ _("Red") }}</option>
                            <option value="yellow">{{ _("Yellow") }}</option>
                        </select>
                </td>
            </tr>
        </table>
    </center>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="Apply" onclick="wpd.zoomView.applySettings();" /> <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('zoom-settings-popup');" /></p>
</div>

<!-- Run Script -->
<div id="runScriptPopup" class="popup" style="width: 500px;">
    <div class="popupheading">{{ _("Run Script") }}</div>
    <p align="left">{{ _("Load a Javascript file to further extend the capabilities of WebPlotDigitizer.") }}</p>
    <p align="left">{{ _("For examples, visit the") }} <a href="https://github.com/ankitrohatgi/WebPlotDigitizer/tree/master/script_examples" target="_blank">{{ _("WebPlotDigitizer repository") }}</a>.</p>
    <p>&nbsp;</p>
    <p align="center"><input type="file" id="runScriptFileInput" /></p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Run") }}" onclick="wpd.scriptInjector.load();" /> <input type="button" value="{{ _("Cancel") }}" onclick="wpd.scriptInjector.cancel();" /></p>
</div>

<!-- Webcam Capture -->
<div id="webcamCapture" class="popup" style="width: 650px;">
    <div class="popupheading">{{ _("Webcam Capture") }}</div>
    <p>&nbsp;</p>
    <p align="center"><video id="webcamVideo" autoplay="true" height="350"></video></p>
    <p align="center"><input type="button" value="{{ _("Capture") }}" onclick="wpd.webcamCapture.capture();" /> <input type="button" value="{{ _("Cancel") }}" onclick="wpd.webcamCapture.cancel();" /></p>
</div>

<!-- Generic Message Popup -->
<div id="messagePopup" class="popup" style="width: 400px;">
    <div id="message-popup-heading" class="popupheading"></div>
    <p>&nbsp;</p>
    <p align="center" id="message-popup-text"></p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("OK") }}" onclick="wpd.messagePopup.close()" /></p>
</div>

<!-- Generic Ok/Cancel Popup -->
<div id="okCancelPopup" class="popup" style="width: 400px; z-index: 110;">
    <div id="ok-cancel-popup-heading" class="popupheading"></div>
    <p>&nbsp;</p>
    <p align="center" id="ok-cancel-popup-text"></p>
    <p>&nbsp;</p>
    <p align="center">
        <input id="ok-cancel-popup-ok-button" type="button" onclick="wpd.okCancelPopup.ok()" />
        <input id="ok-cancel-popup-cancel-button" type="button" onclick="wpd.okCancelPopup.cancel()" />
    </p>
</div>

<!-- Choose axes type -->
<div id="axesList" class="popup" style="width: 400px;">
    <div class="popupheading">{{ _("Choose Plot Type") }}</div>
    <p>&nbsp;</p>
    <center>
        <table>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_xy" checked> {{ _("2D (X-Y) Plot") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_bar"> {{ _("2D Bar Plot") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_polar"> {{ _("Polar Diagram") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_ternary"> {{ _("Ternary Diagram") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_map"> {{ _("Map With Scale Bar") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_image"> {{ _("Image") }}</label></td>
            </tr>
            <tr>
                <td align="left"><label><input type="radio" name="plotlisting" id="r_circular_chart_recorder"> {{ _("Circular Chart Recorder") }}</label></td>
            </tr>
        </table>
    </center>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Align Axes") }}" onclick="wpd.alignAxes.start();">&nbsp;<input type="button" value="{{ _("Cancel") }}" onClick="wpd.popup.close('axesList');"></p>
</div>

<!-- XY Alignment -->
<div id="xyAlignment" class="popup" style="width: 600px;">
    <div class="popupheading">{{ _("X and Y Axes Calibration") }}</div>
    <p>&nbsp;</p>
    <p align="center">{{ _("Enter X-values of the two points clicked on X-axis and Y-values of the two points clicked on Y-axes") }}</p>
    <center>
        <table padding="10">
            <tr>
                <td></td>
                <td align="center" valign="bottom">{{ _("Point 1") }}</td>
                <td align="center" valign="bottom" width="80">{{ _("Point 2") }}</td>
                <td align="center" valign="bottom" width="82">{{ _("Log Scale") }}</td>
            </tr>
            <tr>
                <td align="center">{{ _("X-Axis") }}:</td>
                <td align="center"><input type="text" size="8" id="xmin" value="0" onfocus="wpd.alignAxes.zoomCalPoint(0);" /></td>
                <td align="center"><input type="text" size="8" id="xmax" value="1" onfocus="wpd.alignAxes.zoomCalPoint(1);" /></td>
                <td align="center"><input type="checkbox" id="xlog"></td>
            </tr>
            <tr>
                <td align="center">{{ _("Y-Axis") }}:</td>
                <td align="center"><input type="text" size="8" id="ymin" value="0" onfocus="wpd.alignAxes.zoomCalPoint(2);" /></td>
                <td align="center"><input type="text" size="8" id="ymax" value="1" onfocus="wpd.alignAxes.zoomCalPoint(3);" /></td>
                <td align="center"><input type="checkbox" id="ylog" /></td>
            </tr>
        </table>
        <br />
        <p align="center"><label><input type="checkbox" id="xy-axes-no-rotation" />{{ _("Assume axes are perfectly aligned with image coordinates (skip rotation correction)") }}</label></p>
        <br />
        <p align="center" class="footnote">{{ _("*For dates, use yyyy/mm/dd hh:ii:ss format, where ii denotes minutes (e.g. 2013/10/23 or 2013/10 or 2013/10/23 10:15 or just 10:15). For exponents, enter values as 1e-3 for 10^-3.") }}</p>
        <p>&nbsp;</p>
        <p align="center"><input type="button" id="xybtn" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();" /></p>
    </center>
</div>

<!-- Bar Alignment -->
<div id="barAlignment" class="popup" style="width: 420px;">
    <div class="popupheading">{{ _("Bar Chart Calibration") }}</div>
    <p align="center">{{ _("Enter the values at the two points selected on the continuous axes along the bars") }}</p>
    <center>
        <table padding="10">
            <tr>
                <td align="center" valign="bottom">{{ _("Point 1") }}</td>
                <td align="center" valign="bottom" width="80">{{ _("Point 2") }}</td>
                <td align="center" valign="bottom" width="80">{{ _("Log Scale") }}</td>
            </tr>
            <tr>
                <td align="center"><input type="text" size="8" id="bar-axes-p1" value="0" onfocus="wpd.alignAxes.zoomCalPoint(0);" /></td>
                <td align="center"><input type="text" size="8" id="bar-axes-p2" value="1" onfocus="wpd.alignAxes.zoomCalPoint(1);" /></td>
                <td align="center"><input type="checkbox" id="bar-axes-log-scale" /></td>
            </tr>
        </table>
    </center>
    <p align="center"><label><input type="checkbox" id="bar-axes-rotated" /> Rotated axes (not exactly vertical or horizontal)</label></p>
    <br />
    <p align="center"><input type="button" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();" /></p>
</div>

<!-- Map Alignment -->
<div id="mapAlignment" class="popup" style="width: 350px;">
    <div class="popupheading">{{ _("Map Axes Calibration") }}</div>
    <p align="left">Map Scale Size:</p>
    <p align="center"><input type="text" size="6" id="scaleLength" value="1"> <input type="text" size="6" id="scaleUnits" value="{{ _("Units") }}" /></p>
    <p>&nbsp;</p>
    <p align="left">Origin location:</p>
    <p align="left" style="text-indent:30px;"><label><input name="map-origin-radio" type="radio" id="map-origin-bottom-left" checked />Bottom left</label></p>
    <p align="left" style="text-indent:30px;"><label><input name="map-origin-radio" type="radio" if="map-origin-top-left" />Top Left</label></p>
    <br />
    <p align="center"><input type="button" id="xybtn" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();"></p>
</div>

<!-- Polar Alignment -->
<div id="polarAlignment" class="popup" style="width: 400px;">
    <div class="popupheading">{{ _("Align Polar Axes") }}</div>
    <center>
        <table padding="15">
            <tr>
                <td>&nbsp;</td>
                <td align="center"><b>{{ _("Point 1") }}</b></td>
                <td align="center"><b>{{ _("Point 2") }}</b></td>
                <td align="center"><b>{{ _("Log Scale") }}</b></td>
            </tr>
            <tr>
                <td>R: </td>
                <td align="center"><input type="text" size="6" id="polar-r1" value="1" onfocus="wpd.alignAxes.zoomCalPoint(1);" /></td>
                <td align="center"><input type="text" size="6" id="polar-r2" value="1" onfocus="wpd.alignAxes.zoomCalPoint(2);" /></td>
                <td align="center"><input type="checkbox" id="polar-log-scale" /></td>
            </tr>
            <tr>
                <td>Θ: </td>
                <td align="center"><input type="text" size="6" id="polar-theta1" value="1" onfocus="wpd.alignAxes.zoomCalPoint(1);" /></td>
                <td align="center"><input type="text" size="6" id="polar-theta2" value="1" onfocus="wpd.alignAxes.zoomCalPoint(2);" /></td>
                <td align="center">&nbsp;</td>
            </tr>
        </table>
    </center>
    <p align="center"><label><input type="radio" id="polar-degrees" name="angleUnits" checked> {{ _("Degrees") }}</label> <label><input type="radio" id="polar-radians" name="angleUnits"> {{ _("Radians") }}</label></p>
    <p align="center"><input type="checkbox" id="polar-clockwise"> {{ _("Clockwise") }}</p>
    <br />
    <p align="center"><input type="button" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();"></p>
</div>

<!-- Ternary Alignment -->
<div id="ternaryAlignment" class="popup">
    <div class="popupheading">{{ _("Select Range of Variables") }}</div>
    <p>&nbsp;</p>
    <p align="center">{{ _("Axes Orientation") }}</p>
    <center>
        <table>
            <tr>
                <td><img src="images/ternarynormal.png" width="200"></td>
                <td><img src="images/ternaryreverse.png" width="200"></td>
            </tr>
            <tr>
                <td>
                    <p align="center"><input type="radio" name="ternaryOrientation" id="ternarynormal" checked> {{ _("Normal") }}</p>
                </td>
                <td>
                    <p align="center"><input type="radio" name="ternaryOrientation" id="ternaryreverse"> {{ _("Reverse") }}</p>
                </td>
            </tr>
        </table>
    </center>
    <p align="center">{{ _("Range of Variables") }}</p>
    <center>
        <table>
            <tr>
                <td>
                    <p align="center"><input type="radio" id="range0to1" name="ternaryRange" checked> {{ _("0 to 1") }}&nbsp;&nbsp;</p>
                </td>
                <td>
                    <p align="center">&nbsp;&nbsp;<input type="radio" id="range0to100" name="ternaryRange"> {{ _("0 to 100") }}</p>
                </td>
            </tr>
        </table>
    </center>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();"></p>
</div>

<!-- Circular Chart Recorder Alignment -->
<div id="circularChartRecorderAlignment" class="popup" style="width: 400px;">
    <div class="popupheading">{{ _("Align Circular Chart Recorder Axes") }}</div>
    <center>
        <table padding="15">
            <tr>
                <td align="center"><b>{{ _("Time (T0)") }}</b></td>
                <td align="left"><input type="text" size="15" id="circular-t0" value="0" /></td>
            </tr>
            <tr>
                <td align="center"><b>{{ _("Ranges (R0, R2)") }}</b></td>
                <td align="left">
                    <input type="text" size="6" id="circular-r0" value="0" />
                    <input type="text" size="6" id="circular-r2" value="0" />
                </td>
            </tr>
            <tr>
                <td align="center"><b>{{ _("Chart Start Time (T_Start)") }}</b></td>
                <td align="left"><input type="text" size="15" id="circular-tstart" value="0" /></td>
            </tr>
            <tr>
                <td>{{ _("Total Rotation Time") }}</td>
                <td>
                    <select id="circular-chart-recorder-rotation-time">
                        <option value="week">{{ _("1 Week (7 days)") }}</option>
                        <option value="day">{{ _("1 Day (24 hours)") }}</option>
                        <!-- <option value="month">{{ _("1 Month") }}</option> -->
                    </select>
                </td>
            </tr>
            <tr>
                <td>{{ _("Rotation Direction") }}</td>
                <td>
                    <select id="circular-chart-rotation-direction">
                        <option value="anticlockwise">{{ _("Anti-Clockwise") }}</option>
                        <option value="clockwise">{{ _("Clockwise") }}</option>
                    </select>
                </td>
            </tr>
        </table>
    </center>
    <br />
    <p align="center"><input type="button" value="{{ _("OK") }}" onclick="wpd.alignAxes.align();"></p>
</div>

<!-- View Data -->
<div id="csvWindow" class="popup" style="width: 800px; height: 480px;">
    <div class="popupheading">{{ _("Acquired Data") }}</div>
    <table style="width:780px;">
        <tr>
            <td>
                <!-- left panel -->
                <span id="data-table-dataset-control">
                    <p>{{ _("Dataset") }}: <select id="data-table-dataset-list" onchange="wpd.dataTable.changeDataset();"></select></p>
                </span>
                <p align="center">{{ _("Variables") }}: <span id="dataVariables"></span></p>
                <p align="center"><textarea id="digitizedDataTable" style="width: 480px; height: 250px;"></textarea></p>
                <p align="center">
                    <input type="button" value="{{ _("Copy to Clipboard") }}" onclick="wpd.dataTable.copyToClipboard();" />
                    <input type="button" value="{{ _("Download .CSV") }}" onclick="wpd.dataTable.generateCSV();" />
                    <input type="button" value="{{ _("Graph in Plotly*") }}" onclick="wpd.dataTable.exportToPlotly();" />
                    <input type="button" value="{{ _("Close") }}" onclick="wpd.popup.close('csvWindow');" />
                </p>
                <p align="center" class="footnote">{{ _("*Plotly is a secure data analysis and graphing site with data sharing and access controls.") }}</p>
                <p align="center" class="footnote">{{ _("Visit <a href=\"http://plot.ly\" target=\"plotlyWebsite\">http://plot.ly</a> for details.") }}</p>
            </td>
            <td valign="top" style="width:250px;">
                <!-- data side controls -->
                <p><b>{{ _("Sort") }}</b></p>
                <p class="leftIndent">{{ _("Sort by") }}: <select id="data-sort-variables" onchange="wpd.dataTable.reSort();"></select></p>
                <p class="leftIndent">{{ _("Order") }}:
                    <select id="data-sort-order" onchange="wpd.dataTable.reSort();">
                        <option value="ascending">{{ _("Ascending") }}</option>
                        <option value="descending">{{ _("Descending") }}</option>
                    </select>
                </p>
                <hr />
                <p><b>{{ _("Format") }}</b></p>
                <p class="leftIndent">
                    <span id="data-date-formatting-container">
                        {{ _("Date Formatting") }}:
                        <span id="data-date-formatting"></span>
                    </span>
                </p>
                <p class="leftIndent">{{ _("Number Formatting") }}:</p>
                <p>{{ _("Digits") }}: <input type="text" value="5" size="2" id="data-number-format-digits" />
                    <select id="data-number-format-style">
                        <option value="ignore">{{ _("Ignore") }}</option>
                        <option value="fixed">{{ _("Fixed") }}</option>
                        <option value="precision">{{ _("Precision") }}</option>
                        <option value="exponential">{{ _("Exponential") }}</option>
                    </select>
                </p>
                <p>{{ _("Column Separator") }}: <input type="text" value=", " size="2" id="data-number-format-separator" /></p>
                <p align="right"><input type="button" value="Format" onclick="wpd.dataTable.reSort();" /></p>
            </td>
        </tr>
    </table>
</div>

<!-- XY Axes Calibration Instructions -->
<div id="xyAxesInfo" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Align X-Y Axes") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/xyaxes.png" /></p>
    <p align="center">{{ _("Click four known points on the axes in the <font color=\"red\">order shown in red</font>. Two on the X axis (X1, X2) and two on the Y axis (Y1, Y2)") }}.</p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();" /></p>
</div>

<!-- Bar Chart Axes Calibration Intructions -->
<div id="barAxesInfo" class="popup" style="width:650px;">
    <div class="popupheading">{{ _("Align Bar Chart Axes") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/barchart.png" /></p>
    <p align="center">{{ _("Click on two known points (P1, P2) on the continuous axes along the bars") }}</p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();" /></p>
</div>

<!-- Map Axes Calibration Instructions -->
<div id="mapAxesInfo" class="popup" style="width: 350px;">
    <div class="popupheading">{{ _("Align Map To Scale Bar") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/map.png" /></p>
    <p align="center">{{ _("Click on the two ends of the scale bar on the map.") }}</p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();"></p>
</div>

<!-- Polar Axes Calibration Instructions -->
<div id="polarAxesInfo" class="popup" style="width: 350px;">
    <div class="popupheading">{{ _("Align Polar Axes") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/polaraxes.png" /></p>
    <p align="center">{{ _("Click on the center, followed by two known points.") }}</p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();"></p>
</div>

<!-- Ternary Axes Calibration Instructions -->
<div id="ternaryAxesInfo" class="popup" style="width: 350px;">
    <div class="popupheading">{{ _("Align Ternary Axes") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/ternaryaxes.png" /></p>
    <p align="center">{{ _("Click on the three corners in the order shown above.") }}</p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();"></p>
</div>

<!-- Circular Chart Recorder Axes Calibration Instructions -->
<div id="circularChartRecorderAxesInfo" class="popup" style="width: 620px;">
    <div class="popupheading">{{ _("Align Circular Chart Recorder Axes") }}</div>
    <p>&nbsp;</p>
    <p align="center"><img src="images/circular_chart_recorder_axes.png" /></p>
    <p align="left">{{ _("Click on five (5) points on the chart axes as shown:") }}</p>
    <p align="left">
    <ul>
        <li>{{ _("First three (3) points at different maginitudes but the same known time (T0).") }}</li>
        <li>{{ _("Next two (2) points on any times (T1, T2) but at the same magnitude as R2.") }}</li>
    </ul>
    </p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Proceed") }}" onclick="wpd.alignAxes.pickCorners();"></p>
</div>

<!-- About WPD -->
<div id="helpWindow" class="popup" style="width: 600px;">
    <div class="popupheading">{{ _("WebPlotDigitizer - Web Based Plot Digitizer") }}</div>
    <p>&nbsp;</p>
    <p align="center">{{ _("Version") }} {{ wpdVersion }}</p>
    <p align="center">{{ _("This program is distributed under the <a href=\"https://www.gnu.org/licenses/agpl-3.0-standalone.html\" target=\"_blank\">GNU Affero General Public License Version 3</a>.") }}</p>
    <p align="center">{{ _("Copyright") }} 2010-2024 Ankit Rohatgi &lt;plots@automeris.io&gt;</p>
    <p align="center"><a href="https://github.com/ankitrohatgi/WebPlotDigitizer/graphs/contributors" target="_blank">{{ _("List of Contributors") }}</a></p>
    <p>&nbsp;</p>
    <p align="center"><a href="https://automeris.io/WebPlotDigitizer" target="website">https://automeris.io/WebPlotDigitizer</a></p>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Close") }}" onclick="wpd.popup.close('helpWindow');"></p>
</div>

<!-- Color Selection -->
<div id="color-selection-widget" class="popup" style="width:400px;">
    <div id="color-selection-title" class="popupheading">{{ _("Specify Color") }}</div>
    <p align="center">&nbsp;</p>
    <div style="text-align:center;">
        <div id="color-selection-selected-color-box" class="largeColorBox"></div>
    </div>
    <p align="center">&nbsp;</p>
    <p align="center">R:<input type="text" value="255" id="color-selection-red" size="3" />&nbsp;
        G:<input type="text" id="color-selection-green" value="255" size="3" />&nbsp; B:<input type="text" id="color-selection-blue" value="255" size="3" />
        <input type="button" value="{{ _("Color Picker") }}" onclick="wpd.colorSelectionWidget.pickColor();" />
    </p>
    <p align="center">&nbsp;</p>
    <p>{{ _("Dominant Colors") }}:</p>
    <div id="color-selection-options" style="text-align:center;"></div>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Done") }}" onclick="wpd.colorSelectionWidget.setColor();"></p>
</div>

<!-- Axes Transformation Equations -->
<div id="axes-transformation-equations-window" class="popup" style="width:600px;">
    <div class="popupheading">{{ _("Transformation Equations") }}</div>
    <p>{{ _("The following relationships are being used to convert image pixels to data") }}:</p>
    <div id="axes-transformation-equation-list"></div>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Close") }}" onclick="wpd.popup.close('axes-transformation-equations-window');" /></p>
</div>

<!-- Export JSON -->
<div id="export-json-window" class="popup" style="width:500px;">
    <div class="popupheading">{{ _("Export JSON or Project File") }}</div>
    <p>{{ _("Export a JSON file containing the axes calibrations, digitized data and measurements. This JSON file can be loaded to resume work at a later time. You can also download a combined 'project file' which includes this JSON and also the image in a single TAR file.") }}</p>
    <br />
    <p align="center">Project name: <input type="text" value="wpd_project" id="project-name-input" />.json/.tar</p>
    <br />
    <p align="center">
        <input type="button" value="{{ _("Download JSON") }}" onclick="wpd.saveResume.downloadJSON();" />
        <input type="button" value="{{ _("Download Project File (.tar)") }}" onclick="wpd.saveResume.downloadProject();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('export-json-window');" />
    </p>
</div>

<!-- Import JSON -->
<div id="import-json-window" class="popup" style="width:500px;">
    <div class="popupheading">{{ _("Import JSON/Project") }}</div>
    <p>{{ _("Load a previously exported JSON or project file (.tar)") }} </p>
    <p>{{ _("(Note: This will clear any unsaved data in the current plot.)") }}</p>
    <p>&nbsp;</p>
    <p align="center">{{ _("JSON/Project File") }}: <input type="file" id="import-json-file" onchange="wpd.saveResume.read();" /></p>
    <p>&nbsp;</p>
    <p align="center">
        <input type="button" value="{{ _("Import") }}" onclick="wpd.saveResume.read();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('import-json-window');" />
    </p>
</div>

<!-- Adjust Data Points Keyboard Shortcuts -->
<div id="adjust-data-points-keyboard-shortcuts-window" class="popup" style="width:500px;">
    <div class="popupheading">{{ _("Keyboard Shortcuts") }}</div>
    <p>{{ _("Click to select a data point. The following keys can then be used to adjust the position") }}:</p>
    <center>
        <table cellspacing="5" border="0">
            <tr>
                <td align="right">{{ _("Cursor (Arrows)") }} -</td>
                <td>{{ _("Move up/down/right/left") }}</td>
            </tr>
            <tr>
                <td align="right">{{ _("Shift + Cursor") }} -</td>
                <td>{{ _("Faster rate of movement") }}</td>
            </tr>
            <tr>
                <td align="right">Q -</td>
                <td>{{ _("Select next point") }}</td>
            </tr>
            <tr>
                <td align="right">W -</td>
                <td>{{ _("Select previous point") }}</td>
            </tr>
            <tr>
                <td align="right">{{ _("Del/Backspace") }} -</td>
                <td>{{ _("Delete point") }}</td>
            </tr>
            <tr>
                <td align="right">E -</td>
                <td>{{ _("Edit label (Bar Chart)") }}</td>
            </tr>
            <tr>
                <td align="right" style="vertical-align: top;">R -</td>
                <td>
                    {{ _("Override value (When adjusting ") }}
                    <br />
                    {{ _("non-Bar Chart points") }}
                </td>
            </tr>
        </table>
    </center>
    <p>&nbsp;</p>
    <p align="center"><input type="button" value="{{ _("Close") }}" onclick="wpd.popup.close('adjust-data-points-keyboard-shortcuts-window');" /></p>
</div>

<!-- Data point label editor -->
<div id="data-point-label-editor" class="popup" style="width:280px;">
    <div class="popupheading">{{ _("Edit Label") }}</div>
    <p>&nbsp;</p>
    <p align="center">{{ _("Label") }}: <input type="text" value="{{ _("Data Point") }}" id="data-point-label-field" onkeydown="wpd.dataPointLabelEditor.keydown(event);" /></p>
    <p>&nbsp;</p>
    <p align="center">
        <input type="button" value="{{ _("OK") }}" onclick="wpd.dataPointLabelEditor.ok();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.dataPointLabelEditor.cancel();" />
    </p>
</div>

<!-- Data point value editor -->
<div id="data-point-value-override-editor" class="popup" style="width:280px;">
    <div class="popupheading">{{ _("Override Point Values") }}</div>
    <p>&nbsp;</p>
    <table style="margin-left: 35px;" id="data-point-value-override-editor-table"></table>
    <p>&nbsp;</p>
    <p align="center">
        <input type="hidden" id="data-point-value-override-revert-flag" value="0" />
        <input type="button" value="{{ _("OK") }}" onclick="wpd.dataPointValueOverrideEditor.ok();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.dataPointValueOverrideEditor.cancel();" />
        <input type="button" value="{{ _("Clear") }}" onclick="wpd.dataPointValueOverrideEditor.clear();" />
    </p>
</div>

<!-- Perspective Transform Instructions -->
<div id="perspective-info" class="popup" style="width:500px;">
    <div class="popupheading">{{ _("Perspective Transformation") }}</div>
    <p align="center"><img src="images/perspective.png" width="350"></p>
    <br />
    <p align="center">{{ _("Click on four corners of the region to be transformed as shown.") }}</p>
    <br />
    <p align="center">
        <input type="button" value="{{ _("OK") }}" onclick="wpd.perspective.pickCorners();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('perspective-info');" />
    </p>
</div>

<!-- Edit or Reset Calibration Dialog -->
<div id="edit-or-reset-calibration-popup" class="popup" style="width:500px;">
    <div class="popupheading">{{ _("Edit Existing Calibration?") }}</div>
    <br />
    <p align="center">{{ _("Do you wish to tweak existing axes calibration or select a new axes type?") }}</p>
    <br />
    <p align="center">
        <input type="button" value="{{ _("Edit Calibration") }}" onclick="wpd.alignAxes.reloadCalibrationForEditing();" />

        <input type="button" value="{{ _("Change Axes Type") }}" onclick="wpd.popup.close('edit-or-reset-calibration-popup');wpd.popup.show('axesList');" />

        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('edit-or-reset-calibration-popup');" />
    </p>
</div>

<!-- Export all data dialog -->
<div id="export-all-data-popup" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Export All Datasets") }}</div>
    <p>{{ _("Export data from all datasets") }}</p>
    <br />
    <p align="center">
        <input type="button" value="{{ _("Download .CSV") }}" onclick="wpd.dataExport.generateCSV();" />
        <input type="button" value="{{ _("Export to Plotly") }}" onclick="wpd.dataExport.exportToPlotly();" />
        <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('export-all-data-popup');" />
    </p>
</div>

<!-- Add dataset -->
<div id="add-dataset-popup" class="popup" style="width:450px;">
    <div class="popupheading">{{ _("Add Dataset") }}</div>
    <p>{{ _("Name") }}: <input type="text" id="add-single-dataset-name-input" value="New Dataset" /> <input type="button" value="{{ _("Add Single Dataset") }}" onclick="wpd.dataSeriesManagement.addSingleDataset();" /></p>
    <br />
    <p>{{ _("Count") }}: <input type="text" id="add-multiple-datasets-count-input" value="1" /> <input type="button" value="{{ _("Add Multiple Datasets") }}" onclick="wpd.dataSeriesManagement.addMultipleDatasets();" /></p>
    <br />
    <p align="center"><input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('add-dataset-popup');" /></p>
</div>

<!-- Rename dataset -->
<div id="rename-dataset-popup" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Rename Dataset") }}</div>
    <center>
        <br />
        <p>{{ _("Name") }}: <input type="text" id="rename-dataset-name-input" value="Dataset" onkeypress="wpd.dataSeriesManagement.renameKeypress(event);" /></p>
        <br />
        <p><input type="button" value="{{ _("Rename") }}" onclick="wpd.dataSeriesManagement.renameDataset();" /> <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('rename-dataset-popup');" /></p>
    </center>
</div>

<!-- Rename axes -->
<div id="rename-axes-popup" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Rename Axes") }}</div>
    <center>
        <br />
        <p>{{ _("Name") }}: <input type="text" id="rename-axes-name-input" value="Axes" onkeypress="wpd.alignAxes.renameKeypress(event);" /></p>
        <br />
        <p><input type="button" value="{{ _("Rename") }}" onclick="wpd.alignAxes.renameAxes();" /> <input type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('rename-axes-popup');" /></p>
    </center>
</div>

<!-- Image info -->
<div id="image-info-popup" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Image Info") }}</div>
    <center>
        <br />
        <p>Dimensions: <span id="image-info-dimensions"></span> pixels</p>
        <p class="paged" hidden>Pages: <span id="image-info-pages"></span> pages</p>
        <br />
        <p><input type="button" value="{{ _("OK") }}" onclick="wpd.popup.close('image-info-popup');" /></p>
    </center>
</div>

<!-- Page relabelling -->
<div id="image-page-relabel-popup" class="popup" style="width:400px;">
    <div class="popupheading">{{ _("Page Labels") }}</div>
    <p>{{ _("Relabel the current page number with an alphanumeric string. Optionally, relabel all page numbers in the image based on the current page (only supports integer values).") }}</p>
    <br />
    <p>New page label: <input id="image-page-relabel-input" type="text" onkeyup="wpd.appData.getPageManager().validateLabel(this.value)" /></p>
    <center>
        <p style="color: lightgray;">
            <input id="image-page-relabel-all-checkbox" type="checkbox" disabled />
            <label for="image-page-relabel-all-checkbox">Relabel all pages</label>
        </p>
        <br />
        <p>
            <input id="image-page-relabel-set-button" type="button" value="{{ _("Relabel") }}" onclick="wpd.appData.getPageManager().setLabel();" disabled />
            <input id="image-page-relabel-delete-button" type="button" value="{{ _("Reset") }}" onclick="wpd.appData.getPageManager().deleteLabel();" disabled />
            <input id="image-page-relabel-delete-all-button" type="button" value="{{ _("Reset All") }}" onclick="wpd.appData.getPageManager().deleteLabel(true);" disabled />
            <input id="image-page-relabel-cancel-button" type="button" value="{{ _("Cancel") }}" onclick="wpd.popup.close('image-page-relabel-popup');" />
        </p>
    </center>
</div>

<!-- Data point group settings -->
<div id="point-group-settings-popup" class="popup" style="width: 600px;">
    <div class="popupheading">{{ _("Point Groups") }}</div>
    <table style="margin: 0 auto;">
        <tr>
            <td style="vertical-align: top;">
                <p>
                    {{ _("Point groups are groups of related data points such as standard error or confidence intervals.") }}
                </p>
                <br />
                <p>
                    {{ _("To define a point group, enter a name in the text input below. Create additional point groups as necessary.") }}
                </p>
                <br />
                <p>
                    {{ _("E.g. Assume we have 3 point groups defined: Median, Standard error +1, and Standard error -1. Points would be entered in the order shown in the image to the right. For each set of points, the median value would first be recorded, then the standard error +1, and finally the standard error -1. The process would repeat for the next set of points.") }}
                </p>
            </td>
            <td>
                <center>
                    <img src="images/pointgroups.png" width="300px">
                </center>
            </td>
        </tr>
    </table>
    <br />
    <table style="margin: 0 auto;">
        <tbody id="point-group-table">
            <tr>
                <td>
                    {{ _("Group") }} <span>0</span>:
                </td>
                <td>
                    <input id="point-group-0" placeholder="{{_("Primary Group")}}" type="text" />
                </td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <br />
    <p style="text-align: center;">
        <input id="point-group-add-button" type="button" value="{{_("Add New Group")}}" onclick="wpd.pointGroups.addSettingsRow(true);" />
    </p>
    <p style="text-align: center;">
        <input id="point-group-save-button" type="button" value="{{ _("Save") }}" onclick="wpd.pointGroups.saveSettings();" />
        <input id="point-group-cancel-button" type="button" value="{{ _("Cancel") }}" onclick="wpd.pointGroups.closeSettingsPopup();" />
    </p>
</div>

<!-- Unit testing -->
{% if enableTesting == True %}
<div id="tests-popup" class="popup" style="width:1000px;">
    <div class="popupheading">Unit Tests</div>
    <p align="center"><button onclick="wpd.popup.close('tests-popup');">Close</button></p>
    <br />
    <div style="width:1000px; height: 800px; overflow-y: auto;">
        <div id="qunit"></div>
        <div id="qunit-fixture"></div>
    </div>
</div>
{% endif %}
