{% extends "base/base.html" %}
{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2024 Andrew Rechnitzer
    Copyright (C) 2025-2026 Colin B. Macdonald
    Copyright (C) 2025 Aidan Murphy
{% endcomment %}
{% load static %}
{% block title %}
    Select rectangle from v {{ version }} p {{ page_number }}
{% endblock title %}
{% block page_heading %}
    Select rectangle from v {{ version }} p {{ page_number }}
{% endblock page_heading %}
{% block main_content %}
    <div>
        <a class="btn btn-success" href="{% url 'rectangle_home' %}">
            <i class="bi bi-chevron-left"></i>
            Return to choose version/page
        </a>
    </div>
    <div class="card m-2">
        <div class="card-body">
            <h5 class="card-title">Version {{ version }} page {{ page_number }}</h5>
            <div class="row mb-4">
                <div class="col-6">
                    <img id="reference_image"
                         class="border w-100"
                         src="{% url 'reference_image' version page_number %}" />
                    <canvas id="canvas" style="position:absolute; left: 0px; top: 0px"></canvas>
                </div>
                <div class="col-6">
                    <!-- Note: some of these input boxes, such as "thb_left", "plom_left"
                     have special names that read/written by javascript, to sync
                     interactive box drawing to the coordinates in the inputs. -->
                    <p>The absolute coordinates of the selection.</p>
                    <ul>
                        <li>
                            Top-left (
                            <input id="thb_left" readonly />
                            ,
                            <input id="thb_top" readonly />
                            )
                        </li>
                        <li>
                            Bottom-right (
                            <input id="thb_right" readonly />
                            ,
                            <input id="thb_bottom" readonly />
                            )
                        </li>
                    </ul>
                    <p>The scaled coordinates of the selection.</p>
                    <form method="post">
                        {% csrf_token %}
                        <ul>
                            <li>
                                Top-left (
                                <input id="plom_left" name="plom_left" readonly />
                                ,
                                <input id="plom_top" name="plom_top" readonly />
                                )
                            </li>
                            <li>
                                Bottom-right (
                                <input id="plom_right" name="plom_right" readonly />
                                ,
                                <input id="plom_bottom" name="plom_bottom" readonly />
                                )
                            </li>
                        </ul>
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
    {{ top_left|json_script:"top_left_ref_coord" }}
    {{ bottom_right|json_script:"bottom_right_ref_coord" }}
    <script type="module" src="{% static '/js/rectangle_select.js' %}"></script>
{% endblock main_content %}