{% extends "base/base.html" %}
<!--
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2025 Andrew Rechnitzer
    Copyright (C) 2025-2026 Colin B. Macdonald
    Copyright (C) 2025 Aidan Murphy
-->
{% load static %}
{% block title %}
    Extract ID box rectangle.
{% endblock title %}
{% block page_heading %}
    Extract ID box rectangle
{% endblock page_heading %}
{% block main_content %}
    <div>
        <a class="btn btn-secondary" href="{% url 'get_id_box_parent' %}">
            <i class="bi bi-chevron-left"></i>
            Return to ID pages
        </a>
    </div>
    <div class="card m-2">
        <div class="card-body">
            <h5 class="card-title">ID Page from Version {{ version }}</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>
                <!-- 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.
                 Here those elements are hidden from the users view. -->
                <div class="col-6">
                    <p hidden>The absolute coordinates of the selection.</p>
                    <ul hidden>
                        <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>
                    <form method="post" class="form my-2">
                        {% csrf_token %}
                        <ul hidden>
                            <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>
                        <p>Instructions:</p>
                        <ul>
                            <li>Select a rectangle that completely covers the ID box - with some margin.</li>
                            <li>
                                Click the <q>Find Rectangle</q> button
                                - this will then select the largest rectangle within that region.
                            </li>
                            <li>Check that the resulting rectangle is now tight around the ID box.</li>
                            <li>
                                Click the <q>Set rectangle</q> button
                            </li>
                        </ul>
                        <input class="btn btn-primary"
                               type="submit"
                               name="find_rect"
                               value="Find Rectangle">
                        <input class="btn btn-warning"
                               type="submit"
                               name="submit"
                               value="Set Rectangle">
                        <button hx-delete="" class="btn btn-danger" type="button">Clear</button>
                    </form>
                    {% if initial_rectangle %}
                        {% if best_guess %}
                            <div class="alert alert-info">No pre-existing rectangle, making a reasonable guess (we hope)</div>
                        {% else %}
                            <div class="alert alert-success">Found rectangle</div>
                        {% endif %}
                    {% else %}
                        <div class="alert alert-warning">Could not find rectangle</div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    {{ top_left|json_script:"top_left_ref_coord" }}
    {{ bottom_right|json_script:"bottom_right_ref_coord" }}
    {{ initial_rectangle|json_script:"initial_rectangle" }}
    <script type="module" src="{% static '/js/rectangle_select.js' %}"></script>
{% endblock main_content %}