{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2023 Brennen Chiu
    Copyright (C) 2023-2024 Andrew Rechnitzer
    Copyright (C) 2023-2026 Colin B. Macdonald
    Copyright (C) 2025 Aidan Murphy
    Copyright (C) 2025 Deep Shah
{% endcomment %}
<div id="bundlePageFragment">
    <!-- TODO: I would like to use the containers "class col" in the containing file. -->
    <!-- this way feels repetitive but if I try to flatten they don't stay on one row -->
    <div class="row">
        <div class="col-8">
            <div>
                <!-- Not happy with this 80vh here: sometimes that is too much, sometimes too little -->
                <!-- timestamp forces a refresh, otherwise img is loaded from cache (by most browsers) -->
                <img id="selected-page"
                     class="shadow border rounded"
                     src="{% url 'scan_get_rotated_image' bundle_id index %}?_ts={{ timestamp }}"
                     style="max-height: 83vh;
                            max-width: 100%" />
            </div>
        </div>
        <div class="col-4">
            <div class="card">
                <div class="card-header ps-0 pe-0 d-flex justify-content-between align-items-center">
                    <button type="button"
                            class="btn btn-secondary mx-2"
                            onclick="clickThumbnail({{ index|add:-1 }})"
                            {% if index == 1 %}disabled{% endif %}>
                        <i class="bi bi-chevron-left"></i>
                    </button>
                    <h6 class="card-title text-center" id="pageShowLabel">Page {{ index }} of {{ total_pages }}</h6>
                    <button type="button"
                            class="btn btn-secondary mx-2"
                            onclick="clickThumbnail({{ index|add:1 }})"
                            {% if index == total_pages %}disabled{% endif %}>
                        <i class="bi bi-chevron-right"></i>
                    </button>
                </div>
                <div class="card-body p-2 py-0">
                    {% if current_page.status == "known" %}
                        <div class="alert alert-success my-2 p-2">
                            <h5 class="alert-heading">Known</h5>
                            <ul class="mb-0">
                                <li>paper: {{ current_page.info.paper_number }}</li>
                                <li>page: {{ current_page.info.page_number }}</li>
                                <li>
                                    version:
                                    {% if current_page.info.version %}
                                        {{ current_page.info.version }}
                                    {% else %}
                                        <!-- not necessarily true, but users wanting more info can check the qr code info -->
                                        no data
                                    {% endif %}
                                </li>
                            </ul>
                        </div>
                    {% elif current_page.status == "extra" %}
                        <div class="alert alert-info my-2 p-2">
                            <h5 class="alert-heading">Extra</h5>
                            <ul class="mb-0">
                                <li>paper: {{ current_page.info.paper_number }}</li>
                                <li>questions: {{ current_page.info.question_list_html | safe }}</li>
                            </ul>
                        </div>
                        <p class="mb-0">rotation: {{ current_page.rotation }}</p>
                    {% elif current_page.status == "unknown" %}
                        <div class="alert alert-warning my-2 p-2">
                            <h5 class="alert-heading">Unknown</h5>
                        </div>
                    {% elif current_page.status == "discard" %}
                        <div class="alert alert-dark mt-2 mb-1 p-2">
                            <h5 class="alert-heading">Discard</h5>
                            {{ current_page.info.reason }}
                        </div>
                    {% elif current_page.status == "error" %}
                        <div class="alert alert-danger my-2 p-2">
                            <h5 class="alert-heading">Error</h5>
                            {{ current_page.info.reason }}
                            {% if current_page.info.reason_enum == "Collision" %}
                                <a href="https://plom.readthedocs.io/en/latest/scanning.html#collisions">Why
                                are collisions a problem, and what are my options?</a>
                            {% endif %}
                        </div>
                    {% elif current_page.status == "unread" %}
                        <div class="alert alert-dark my-2">
                            <h5 class="alert-heading">Unread</h5>
                            <ul>
                                <!-- TODO? -->
                                <li>Have not read qr-codes yet</li>
                            </ul>
                        </div>
                    {% endif %}
                    {% if current_page.qr_codes %}
                        <details>
                            <summary>{{ current_page.qr_codes|length }} QR code{{ current_page.qr_codes|length|pluralize }}</summary>
                            <small class="text-muted">
                                {% for crn, code in current_page.qr_codes.items %}
                                    <details class="ps-3">
                                        <summary>{{ crn }}: {{ code.tpv }}</summary>
                                        <p class="ps-4 mb-0">
                                            {% for k, v in code.items %}
                                                {{ k }}: {{ v }}
                                                <br />
                                            {% endfor %}
                                        </p>
                                    </details>
                                {% endfor %}
                            </small>
                        </details>
                    {% else %}
                        <p class="mb-0">No QR code information</p>
                    {% endif %}
                    <p class="mb-0">rotation: {{ current_page.rotation }}</p>
                    <details>
                        <summary>Log</summary>
                        <small class="text-muted">{{ current_page.history }}</small>
                    </details>
                    {% if is_push_locked %}
                        <!-- loaded page after another tab pushed for example -->
                        <div class="alert alert-warning text-center my-2">Bundle is locked</div>
                    {% endif %}
                    {% if not is_pushed and not is_push_locked %}
                        <!-- add in the stuff we can do before pushing -->
                        <div class="my-2">
                            <div class="d-flex">
                                <!-- rotations target the thumbnail container for a swap, then click on them -->
                                <a class="btn btn-secondary w-75"
                                   data-bs-toggle="tooltip"
                                   title="Rotate counter-clockwise"
                                   hx-post="{% url 'rotate_img' bundle_id index 90 %}"
                                   hx-target="#selected-page"
                                   hx-swap="outerHTML"
                                   hx-on:htmx:after-request="refreshThumbnailContainer({{ index }}); clickThumbnail({{ index }});">
                                    <i class="bi-arrow-counterclockwise fs-5"></i>
                                </a>
                                <a class="btn btn-secondary mx-2 w-100"
                                   data-bs-toggle="tooltip"
                                   title="Rotate 180"
                                   hx-post="{% url 'rotate_img' bundle_id index 180 %}"
                                   hx-target="#selected-page"
                                   hx-swap="outerHTML"
                                   hx-on:htmx:after-request="refreshThumbnailContainer({{ index }}); clickThumbnail({{ index }});">
                                    <i class="bi-arrow-repeat fs-5"></i>
                                </a>
                                <a class="btn btn-secondary w-75"
                                   data-bs-toggle="tooltip"
                                   title="Rotate clockwise"
                                   hx-post="{% url 'rotate_img' bundle_id index 270 %}"
                                   hx-target="#selected-page"
                                   hx-swap="outerHTML"
                                   hx-on:htmx:after-request="refreshThumbnailContainer({{ index }}); clickThumbnail({{ index }});">
                                    <i class="bi-arrow-clockwise fs-5"></i>
                                </a>
                            </div>
                        </div>
                        <!-- common error handling dump -->
                        <!-- TODO: annoyingly we reserve space: without pb-4 the error overlaps
                             the next dive, not sure why -->
                        <div class="py-4" id="invalidmessage"></div>
                        <!-- what we can do depends on the status -->
                        {% if current_page.status == "known" or current_page.status == "error" or current_page.status == "extra" or current_page.status == "unknown" %}
                            <div class="my-2"
                                 hx-target="this"
                                 hx-target-error="this"
                                 hx-on:htmx:after-request="onSuccessRefresh(event, {{ index }});">
                                <a class="btn btn-outline-danger text-center w-100"
                                   hx-post="{% url 'discard_image' bundle_id index %}">Discard</a>
                            </div>
                        {% endif %}
                        {% if current_page.status == "error" or current_page.status == "discard" or current_page.status == "unknown" %}
                            <div class="my-2"
                                 hx-target="this"
                                 hx-target-error="this"
                                 hx-on:htmx:after-request="onSuccessRefresh(event, {{ index }});">
                                <a class="btn btn-outline-secondary text-center w-100"
                                   hx-put="{% url 'extralise_image' bundle_id index %}">Cast to extra page</a>
                            </div>
                        {% endif %}
                        {% if current_page.status == "error" or current_page.status == "discard" or current_page.status == "unknown" %}
                            <div class="my-2">
                                <a class="btn btn-outline-success text-center w-100"
                                   hx-get="{% url 'knowify_image' bundle_id index %}"
                                   hx-target="#bundlePageFragment">Cast to known page</a>
                            </div>
                        {% endif %}
                        {% if current_page.status == "known" %}
                            <!-- stuff unique to known pages -->
                        {% elif current_page.status == "error" %}
                            <!-- stuff unique to error pages -->
                        {% elif current_page.status == "unread" %}
                            <!-- cannot do anything with an unread page -->
                        {% elif current_page.status == "discard" %}
                            <!-- stuff unique to discard pages -->
                            <div class="my-2"
                                 hx-target="this"
                                 hx-target-error="this"
                                 hx-on:htmx:after-request="onSuccessRefresh(event, {{ index }});">
                                <a class="btn btn-outline-secondary text-center w-100"
                                   hx-post="{% url 'unknowify_image' bundle_id index %}">Cast to unknown page</a>
                            </div>
                            <div class="my-2">
                                <a class="btn btn-outline-danger text-center w-100"
                                   hx-post="{% url 'unknowify_all_discards' bundle_id %}"
                                   hx-confirm="This will convert all discarded pages to unknown pages!">
                                    <i class="bi bi-exclamation-diamond-fill"></i>
                                    Cast all discards to unknown pages
                                    <i class="bi bi-exclamation-diamond-fill"></i>
                                </a>
                            </div>
                        {% elif current_page.status == "unknown" %}
                            <!-- stuff unique to unknown pages -->
                            <div class="my-2">
                                <a class="btn btn-outline-danger text-centre w-100"
                                   hx-post="{% url 'discard_all_unknowns' bundle_id %}"
                                   hx-confirm="This will convert all unknown pages to discarded pages!">
                                    <i class="bi bi-exclamation-diamond-fill"></i>
                                    Discard all unknown pages
                                    <i class="bi bi-exclamation-diamond-fill"></i>
                                </a>
                            </div>
                        {% elif current_page.status == "extra" %}
                            <!-- stuff unique to extra pages  -->
                            <div class="my-2">
                                <a class="btn btn-outline-secondary w-100"
                                   href="{% url 'scan_compare_handwriting' bundle_id index %}"
                                   target="_blank"
                                   data-bs-toggle="tooltip"
                                   data-bs-title="Open handwriting comparison view of nearby papers in a new tab">
                                    Show Neighbours <i class="bi bi-box-arrow-up-right"></i>
                                </a>
                            </div>
                            {% if current_page.info.paper_number %}
                                <div class="my-2"
                                     hx-target="this"
                                     hx-target-error="this"
                                     hx-on:htmx:after-request="onSuccessRefresh(event, {{ index }});">
                                    <a class="btn btn-outline-secondary text-center w-100"
                                       hx-delete="{% url 'extralise_image' bundle_id index %}">Clear information</a>
                                </div>
                            {% else %}
                                <div class="alert alert-secondary my-2">
                                    <h5>Set extra page information</h5>
                                    <form hx-post="{% url 'extralise_image' bundle_id index %}"
                                          hx-target-error="#error_msg_for_set_extra"
                                          hx-on:htmx:after-request="onSuccessRefresh(event, {{ index }})">
                                        <!--
                                            This Alpine.js block manages interactivity for assigning an extra page to a specific paper.

                                            Users can choose how to assign this extra page to a paper:
                                            1. By selecting adjacent papers (radio buttons),
                                            2. Or by picking a paper manually from a dropdown list.

                                            Reactive State (via x-data):
                                            - selection_method: which radio option the user selected ('prev', 'next', 'dropdown')
                                            - final_paper_number: the actual paper number that will be submitted with the form
                                            - bundlepapers: true/false toggle controlling whether the dropdown shows bundle-only papers or all papers

                                            - The <input type="hidden"> is bound to final_paper_number using :value.
                                            This ensures the form always submits the currently selected paper number,
                                            regardless of whether it was chosen via radio or dropdown.

                                            - Each radio button has:
                                            • x-model="selection_method" -> binds the chosen method to Alpine state
                                            • @change="final_paper_number = '...' -> updates the paper number accordingly

                                            - When "Choose from list..." is selected:
                                            • The dropdown section becomes visible (x-show="selection_method === 'dropdown'")
                                            • A checkbox lets the user toggle between "papers from this bundle" and "all papers"
                                            • The appropriate <select> updates final_paper_number via x-model

                                            This approach ensures seamless user interaction with instant feedback,
                                            without requiring full-page reloads.
                                          -->
                                        <div x-data="{ selection_method: '', final_paper_number: null, bundlepapers: true }">
                                            <input type="hidden" name="paper_number" :value="final_paper_number">
                                            <p class="mb-1 fw-bold">Paper:</p>
                                            {% if prev_paper_number %}
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="radio"
                                                           name="selection_radio_{{ index }}"
                                                           value="prev"
                                                           x-model="selection_method"
                                                           @change="final_paper_number = '{{ prev_paper_number }}'"
                                                           id="prev_radio_{{ index }}">
                                                    <label class="form-check-label"
                                                           for="prev_radio_{{ index }}">{{ prev_paper_number }} (adjacent paper)</label>
                                                </div>
                                            {% endif %}
                                            {% if next_paper_number %}
                                                <div class="form-check">
                                                    <input class="form-check-input"
                                                           type="radio"
                                                           name="selection_radio_{{ index }}"
                                                           value="next"
                                                           x-model="selection_method"
                                                           @change="final_paper_number = '{{ next_paper_number }}'"
                                                           id="next_radio_{{ index }}">
                                                    <label class="form-check-label"
                                                           for="next_radio_{{ index }}">{{ next_paper_number }} (adjacent paper)</label>
                                                </div>
                                            {% endif %}
                                            <div class="form-check">
                                                <input class="form-check-input"
                                                       type="radio"
                                                       name="selection_radio_{{ index }}"
                                                       value="dropdown"
                                                       x-model="selection_method"
                                                       @change="final_paper_number = null"
                                                       id="dropdown_radio_{{ index }}">
                                                <label class="form-check-label"
                                                       for="dropdown_radio_{{ index }}">Choose from list...</label>
                                            </div>
                                            <div x-show="selection_method === 'dropdown'"
                                                 style="display: none"
                                                 class="mt-2 ms-4 border-start ps-3">
                                                <div class="form-check">
                                                    <input name="bundleOrArbitrary"
                                                           class="form-check-input"
                                                           type="checkbox"
                                                           x-model="bundlepapers"
                                                           id="bundlepapers_toggle_{{ index }}">
                                                    <label class="form-check-label"
                                                           for="bundlepapers_toggle_{{ index }}">from this bundle</label>
                                                </div>
                                                <div x-show="bundlepapers" class="mt-2">
                                                    <select class="form-select" x-model="final_paper_number">
                                                        <option value="" selected>Select paper from bundle...</option>
                                                        {% for pn in bundle_paper_numbers %}<option value="{{ pn }}">{{ pn }}</option>{% endfor %}
                                                    </select>
                                                </div>
                                                <div x-show="!bundlepapers" class="mt-2">
                                                    <select class="form-select" x-model="final_paper_number">
                                                        <option value="" selected>Select any produced paper...</option>
                                                        {% for pn in all_paper_numbers %}<option value="{{ pn }}">{{ pn }}</option>{% endfor %}
                                                    </select>
                                                </div>
                                            </div>
                                            <hr>
                                            <fieldset x-data="{ question_all_dnm_selection: 'choose_q' }" class="mt-2">
                                                <p class="mb-1 fw-bold">Question(s):</p>
                                                <div class="form-check">
                                                    <input name="question_all_dnm"
                                                           value="choose_q"
                                                           class="form-check-input"
                                                           type="radio"
                                                           id="question_all_dnm1_{{ index }}"
                                                           checked
                                                           x-model="question_all_dnm_selection" />
                                                    <label class="form-check-label"
                                                           for="question_all_dnm1_{{ index }}">Attach to specific question(s):</label>
                                                </div>
                                                <div x-show="question_all_dnm_selection === 'choose_q'"
                                                     class="ms-4 border-start ps-3">
                                                    <fieldset>
                                                        {% for qidx, qlabel, qlabel_html in question_labels_html %}
                                                            <div class="form-check">
                                                                <input name="questions"
                                                                       class="form-check-input"
                                                                       type="checkbox"
                                                                       value="{{ qidx }}"
                                                                       id="qidx_{{ qidx }}_{{ index }}">
                                                                <label class="form-check-label"
                                                                       for="qidx_{{ qidx }}_{{ index }}">{{ qlabel_html | safe }}</label>
                                                            </div>
                                                        {% endfor %}
                                                    </fieldset>
                                                </div>
                                                <div class="form-check">
                                                    <input name="question_all_dnm"
                                                           value="choose_all"
                                                           class="form-check-input"
                                                           type="radio"
                                                           id="question_all_dnm2_{{ index }}"
                                                           x-model="question_all_dnm_selection" />
                                                    <label class="form-check-label" for="question_all_dnm2_{{ index }}">
                                                        Attach to <em>all</em> questions
                                                    </label>
                                                </div>
                                                <div class="form-check">
                                                    <input name="question_all_dnm"
                                                           value="choose_dnm"
                                                           class="form-check-input"
                                                           type="radio"
                                                           id="question_all_dnm3_{{ index }}"
                                                           x-model="question_all_dnm_selection" />
                                                    <label class="form-check-label" for="question_all_dnm3_{{ index }}">
                                                        Do not mark <small>(but keep with this paper)</small>
                                                    </label>
                                                </div>
                                            </fieldset>
                                        </div>
                                        <div class="mt-1 mb-1">
                                            <!-- this is the target for any htmx error messages -->
                                            <!-- p-0 border-0 here tries to hide the div when its empty -->
                                            <div id="error_msg_for_set_extra" class="p-0 border-0 alert alert-danger"></div>
                                        </div>
                                        <button class="btn btn-primary" type="submit">Save choices</button>
                                    </form>
                                </div>
                            {% endif %}
                        {% endif %}
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  function onSuccessRefresh(event, index) {
    if (event.detail.failed) {
      return;
    }
    refreshThumbnailContainer(index);
    clickThumbnail(index);
  }
</script>