{% extends "base/base.html" %}
{% comment %}
    SPDX-License-Identifier: AGPL-3.0-or-later
    Copyright (C) 2022-2023 Brennen Chiu
    Copyright (C) 2023-2024 Andrew Rechnitzer
    Copyright (C) 2023-2026 Colin B. Macdonald
    Copyright (C) 2024 Winnie Cheung
    Copyright (C) 2025 Philip D. Loewen
    Copyright (C) 2025-2026 Aidan Murphy
{% endcomment %}
{% block title %}
    Bundle thumbnails
{% endblock title %}
{% block page_heading %}
    Bundle thumbnails
    {% if is_pushed %}— read-only{% endif %}
{% endblock page_heading %}
{% block main_content %}
    <div class="my-2">
        <a class="btn btn-primary" href="{% url 'scan_overview' %}">Bundle and paper overview</a>
        {% if is_pushed %}
            <a class="btn btn-primary" href="{% url 'scan_list_pushed' %}">Pushed bundles</a>
        {% endif %}
        <a class="btn btn-primary" href="{% url 'scan_list_staged' %}">Staged bundles</a>
        <a class="btn btn-secondary"
           href="{% url 'scan_recent_bundle_thumbnails' %}">Go to most recently-staged bundle</a>
    </div>
    <div id="bundleSummary"
         hx-get="{% url 'scan_bundle_summary' bundle_id %}"
         hx-trigger="summaryRefresh"
         hx-swap="innerHTML"
         hx-target="#bundleSummary"
         hx-on:htmx:after-swap="refreshBundleSummaryTooltips()">
        {% include "Scan/fragments/bundle_summary.html" with slug=slug n_collisions=n_collisions n_incomplete=n_incomplete colliding_images_nice_format=colliding_images_nice_format total_pages=total_pages known_pages=known_pages unknown_pages=unknown_pages extra_pages=extra_pages discard_pages=discard_pages error_pages=error_pages unread_pages=unread_pages paper_info_list=paper_info_list incomplete_papers_list=incomplete_papers_list %}
    </div>
    <div class="row pt-3">
        <div class="col-4">
            <div class="card">
                <div class="card-header">
                    <div class="card-title mb-0">
                        <div class="dropdown">
                            <!-- WET, see script tag further down. -->
                            <!-- autocomplete is Firefox-specific fix: https://bugzilla.mozilla.org/show_bug.cgi?id=654072 -->
                            <!-- ********* Note ********* -->
                            <!-- 13th of August 2025 - filtering only happens when changing the dropdown -->
                            <!-- other state changes intentionally don't cause the page thumbnails to filter. -->
                            <!-- The idea is to give users a chance to review or undo their recent changes. -->
                            <select class="form-select"
                                    onchange="filterPages(this.value)"
                                    autocomplete="off">
                                <option>all</option>
                                <option>needs your attention</option>
                                <option>known pages</option>
                                <option>extra pages</option>
                                <option>extra pages without information</option>
                                <option>errors</option>
                                <option>discarded pages</option>
                                <option>unknown pages</option>
                                <option>unread pages</option>
                            </select>
                        </div>
                        <hr class="mb-1" />
                        <div class="container">
                            <div class="row text-center d-flex align-items-center">
                                <div class="col-2 px-1">
                                    <button type="button"
                                            class="btn btn-sm btn-outline"
                                            onclick="tickSlider(-1)">-</button>
                                </div>
                                <div class="col-8 px-1 d-flex align-items-center">
                                    <input id="thumbnailResizeSlider"
                                           type="range"
                                           class="w-100"
                                           min="3"
                                           max="20"
                                           step="1"
                                           value="10"
                                           oninput="resizeThumbnailContainers(this.value)"
                                           autocomplete="off" />
                                </div>
                                <div class="col-2 px-1">
                                    <button type="button"
                                            class="btn btn-sm btn-outline"
                                            onclick="tickSlider(1)">+</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="card-body py-2 px-0">
                    <!-- Not happy with this 80vh here: sometimes that is too much, sometimes too little -->
                    <div class="container overflow-y-scroll p-2" style="max-height:78vh;">
                        <div class="row row-cols-auto gy-1 gx-1 justify-content-evenly">
                            {% for pg in pages %}
                                <!-- each of these fragments is in a div with a unique id - easy to target with htmx -->
                                <div id="fragmentcontainer-{{ pg.order }}"
                                     class="text-center"
                                     hx-get="{% url 'single_thumbnail_container' bundle_id pg.order %}"
                                     hx-trigger="thumbnailRefresh"
                                     hx-swap="innerHTML"
                                     hx-on:htmx:after-swap="refreshThumbnailTooltip({{ pg.order }});refreshBundleSummary();clickThumbnail({{ pg.order }})"
                                     hx-on:htmx:after-settle="resizeThumbnailContainer({{ pg.order }})">
                                    {% include "Scan/fragments/bundle_thumbnail_container.html" with pg=pg %}
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-8" id="updatePage" style="min-height: 83vh;">
            <!-- HTMX will fill this in -->
        </div>
    </div>
    <!-- thumbnail container border uses radios, this changes radio appearance -->
    <style>
			  input[type="radio"][id^="pgradio-"] {
				display: none;
			  }

			  .radio-label {
				outline:inner;
				border-radius: 6px;
				user-select: none;
			  }

			  input[type="radio"][id^="pgradio-"]:checked + .radio-label {
				outline: 3px solid #000000;
			  }

			  .radio-label:hover {
				cursor: pointer;
			  }
    </style>
    <script>
			// https://getbootstrap.com/docs/5.3/components/tooltips
			// create all tooltips when page is initially loaded
				const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
				const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));

			// do stuff after all the content on the page has loaded (not necessarily rendered)
			document.addEventListener("DOMContentLoaded", (event) => {
				let sliderValue = localStorage.getItem("thumbnailSizeSliderValue");
				if (sliderValue !== null)
					setSlider(sliderValue);
			});

			// iterate over the thumbnail containers and decide which to show/hide
			// important to keep track of different None/none/null references between html, js, py
			function filterPages(filter) {
			  document.querySelectorAll('div[id^="fragmentcontainer-"]').forEach(div => {
				const pg_container = div.firstElementChild;
				const status_ = pg_container.dataset.status;
				const paper_number = pg_container.dataset.paper_number;
				const extra_missing_info = status_ == "extra" && paper_number == "None";

				switch (filter) {
				case "needs your attention":
						if (extra_missing_info || status_ == "unknown" || status_ == "error")
							div.style.display = '';
						else
							div.style.display = 'none';
						break;
				case "known pages": div.style.display = status_ == "known" ? '': 'none' ;break;
				case "extra pages": div.style.display = status_ == "extra" ? '': 'none' ;break;
				case "extra pages without information":
						if (extra_missing_info)
							div.style.display = '';
						else
							div.style.display = 'none';
						break;
				case "errors": div.style.display = status_ == "error" ? '': 'none' ;break;
				case "discarded pages": div.style.display = status_ == "discard" ? '': 'none' ;break;
				case "unknown pages": div.style.display = status_ == "unknown" ? '': 'none' ;break;
				case "unread pages": div.style.display = status_ == "unread" ? '': 'none' ;break;
				case "all": ;
				default:
						div.style.display = '';
				}
			  });
			}

			// trigger a thumbnail to refresh using information from the server
			// htmx.trigger isn't itself async, but it is used to trigger an async event
			function refreshThumbnailContainer(index) {
				htmx.trigger(document.getElementById("fragmentcontainer-" + index), "thumbnailRefresh");
			}


			// trigger the summary at the top of the page to refresh
			function refreshBundleSummary() {
				htmx.trigger(document.getElementById("bundleSummary"), "summaryRefresh");
			}

			// trigger the tooltips in the summary to refresh
			function refreshBundleSummaryTooltips() {
				var summaryTooltipTriggerList = document.querySelectorAll('button[id^="paper-btn-"]');
				var updatedTooltipList = [...summaryTooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
			}

			// add a new tooltip to a thumbnail
			function refreshThumbnailTooltip(index) {
				new bootstrap.Tooltip(document.getElementById("pgcontainer-" + index));
			}

			// click a particular thumbnail
			function clickThumbnail(bundle_index) {
				const target_thumbnail = document.getElementById("pgradio-" + bundle_index);
				target_thumbnail.click();
			}

			// resize _all_ thumbnail containers
			function resizeThumbnailContainers(newWidth) {
				var thumbnailImages = document.querySelectorAll('img[id^="thumbnailimg-"]');
				thumbnailImages.forEach(img => {
					img.style.width = newWidth*0.7 + "ch";
				})
				localStorage.setItem("thumbnailSizeSliderValue", newWidth);
			}
			function resizeThumbnailContainer(index) {
				var thumbnailImage = document.getElementById("thumbnailimg-" + index);
				var slider = document.getElementById('thumbnailResizeSlider');
				thumbnailImage.style.width = slider.value*0.7 + "ch";
				localStorage.setItem("thumbnailSizeSliderValue", slider.value);
			}
			function tickSlider(valueChange) {
				var slider = document.getElementById('thumbnailResizeSlider');
				slider.value = parseFloat(slider.value) + parseFloat(slider.step)*valueChange;
				resizeThumbnailContainers(slider.value);
			}
			function setSlider(sliderValue) {
				var slider = document.getElementById('thumbnailResizeSlider');
				slider.value = sliderValue;
				resizeThumbnailContainers(slider.value);
			}
    </script>
{% endblock main_content %}