{% extends "base.html" %} {% block title %}Queue Manager{% endblock %} {% block
body_class %}layout-wide{% endblock %} {% block content %} {% from "macros.html"
import qrcode_queue %}

<div class="container">
    <div
        style="
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 100%;
            margin-bottom: 20px;
        "
    >
        <h1>Queue Manager</h1>
        <div class="actions">
            <button onclick="dedupQueue()" class="btn btn-sm">Dedup</button>
            <button onclick="sortQueue(false)" class="btn btn-sm">
                Sort A-Z
            </button>
            <button onclick="sortQueue(true)" class="btn btn-sm">
                Sort Z-A
            </button>
            <button onclick="clearQueue()" class="btn btn-sm btn-danger">
                Clear All
            </button>
        </div>
    </div>

    <input
        type="text"
        id="search-input"
        class="form-control"
        placeholder="Search links..."
        style="margin-bottom: 20px"
        onkeyup="filterQueue()"
    />

    <div id="queue-container">
        {% if queue_items %}
        <p id="count-display">Total: {{ queue_items|length }}</p>
        {{ qrcode_queue(queue_items) }} {% else %}
        <p>Queue is empty.</p>
        {% endif %}
    </div>
</div>

<script>
    async function dedupQueue() {
        if (!confirm("Remove duplicates?")) return;
        await fetch("/api/queue/dedup", { method: "POST" });
        window.location.reload();
    }

    async function sortQueue(reverse) {
        await fetch(`/api/queue/sort?reverse=${reverse}`, { method: "POST" });
        window.location.reload();
    }

    async function clearQueue() {
        if (!confirm("Clear entire queue?")) return;
        await fetch("/api/queue/clear", { method: "POST" });
        window.location.reload();
    }

    function filterQueue() {
        /** @type {HTMLInputElement} */
        const input = document.getElementById("search-input");
        const filter = input.value.toLowerCase();
        /** @type {NodeListOf<HTMLLIElement>} */
        const listItems = document.querySelectorAll(".queue-grid li");
        let visibleCount = 0;

        listItems.forEach((li) => {
            /** @type {HTMLAnchorElement} */
            const link = li.querySelector("a");
            const text = link.textContent || link.innerText;
            if (text.toLowerCase().indexOf(filter) > -1) {
                li.style.display = "";
                visibleCount++;
            } else {
                li.style.display = "none";
            }
        });
        /** @type {HTMLParagraphElement} */
        const countDisplay = document.getElementById("count-display");
        countDisplay.textContent = `Showing: ${visibleCount} / ${listItems.length}`;
    }
</script>
{% endblock %}