{% extends "ui/_layout.html" %}
{% block title %}Hashing - bty-web{% endblock %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#hashing-list">Active</a>
            <span class="vr"></span>
            <a href="#hashing-activity">Activity</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
{% from "ui/_intro_box.html" import render as intro_box %}
{% call intro_box() %}
    Background SHA-256 hashing of files under
    <code>{{ image_root }}</code>: a freshly-uploaded or dropped-in image
    gets hashed automatically (one at a time by default, so small
    hardware stays responsive). The hash is what makes a row in
    <a href="/ui/images">Images</a> bindable from a machine's "Bind
    image" picker on the machine-detail page. History is at the bottom.
{% endcall %}
{% endblock %}

{% block content %}
<div class="card mb-3" id="hashing-list">
    <div class="card-header bg-light fw-semibold d-flex justify-content-between align-items-center flex-wrap gap-2">
        <span><i class="bi bi-hash me-1"></i>Hashing
              <span class="text-muted small bty-workers-poll-status ms-1">refreshing...</span></span>
    </div>
    <div class="table-responsive">
        <table class="table mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    <th style="width: 35%;">Image</th>
                    <th>Status</th>
                    <th style="width: 35%;">Progress</th>
                    <th>Bytes</th>
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody class="bty-workers-hashing-tbody">
                <tr><td colspan="5" class="text-muted">No active hash jobs.</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script>
(function () {
    // esc + fmtBytes come from /static/bty-utils.js (loaded by the
    // layout); local aliases keep the per-page <script> readable.
    var esc = window.btyUtils.esc;
    var fmtBytes = window.btyUtils.fmtBytes;
    function statusBadge(s) {
        var cls = {
            "queued": "bg-secondary", "running": "bg-primary",
            "completed": "bg-success", "cancelled": "bg-warning text-dark",
            "failed": "bg-danger",
        }[s] || "bg-secondary";
        return '<span class="badge ' + cls + '">' + esc(s) + '</span>';
    }
    function progressBar(d) {
        if (d.bytes_total == null) {
            return '<div class="progress" style="height: 16px;">' +
                   '<div class="progress-bar progress-bar-striped progress-bar-animated" ' +
                   'style="width: 100%;">' + (d.status === "running" ? "..." : "") + '</div></div>';
        }
        var pct = d.bytes_total > 0 ? (100 * (d.bytes_done || 0) / d.bytes_total) : 0;
        return '<div class="progress" style="height: 16px;">' +
               '<div class="progress-bar" style="width: ' +
               pct.toFixed(1) + '%;">' + pct.toFixed(1) + '%</div></div>';
    }
    function isActive(j) {
        return j && (j.status === "queued" || j.status === "running");
    }
    function render(jobs) {
        var tbody = document.querySelector(".bty-workers-hashing-tbody");
        if (!tbody) return;
        var rows = (jobs || []).filter(isActive);
        if (!rows.length) {
            tbody.innerHTML = '<tr><td colspan="5" class="text-muted">No active hash jobs.</td></tr>';
            return;
        }
        tbody.innerHTML = rows.map(function (d) {
            var pseudo = { status: d.status, bytes_done: d.bytes_hashed || 0,
                           bytes_total: d.bytes_total || null };
            var bytes = fmtBytes(d.bytes_hashed || 0);
            if (d.bytes_total) bytes += " / " + fmtBytes(d.bytes_total);
            var cancel = '<button type="button" class="btn btn-sm btn-outline-danger text-nowrap ' +
                         'bty-workers-cancel" data-name="' +
                         esc(d.name) + '"><i class="bi bi-x-circle me-1"></i>Cancel</button>';
            return "<tr>" +
                   "<td><code>" + esc(d.name) + "</code></td>" +
                   "<td>" + statusBadge(d.status) + "</td>" +
                   "<td>" + progressBar(pseudo) + "</td>" +
                   "<td class=\"small\">" + esc(bytes) + "</td>" +
                   "<td class=\"text-end\">" + cancel + "</td>" +
                   "</tr>";
        }).join("");
    }
    // Active-job count from the previous poll. The Recent activity
    // card + the cached-sha badges on /ui/images are server-rendered;
    // when a hash transitions from active to terminal we reload so
    // the operator sees the new event + the updated badges without
    // a manual refresh. Same idiom as the Backups page.
    var lastActiveCount = 0;
    function refresh() {
        var ts = "updated " + new Date().toLocaleTimeString();
        return fetch("/catalog/hashes", { credentials: "same-origin" })
            .then(function (r) { return r.ok ? r.json() : null; })
            .then(function (data) {
                var jobs = (data && data.hashes) || [];
                render(jobs);
                var activeCount = jobs.filter(isActive).length;
                if (lastActiveCount > 0 && activeCount === 0) {
                    window.location.reload();
                    return;
                }
                lastActiveCount = activeCount;
                var statusEl = document.querySelector(".bty-workers-poll-status");
                if (statusEl) statusEl.textContent = data ? ts : "(poll failed)";
            }).catch(function () {
                var statusEl = document.querySelector(".bty-workers-poll-status");
                if (statusEl) statusEl.textContent = "(poll failed)";
            });
    }
    document.addEventListener("click", function (ev) {
        var btn = ev.target.closest(".bty-workers-cancel");
        if (!btn) return;
        var name = btn.dataset.name;
        if (!name) return;
        btn.disabled = true;
        fetch("/catalog/hashes/" + encodeURIComponent(name),
              { method: "DELETE", credentials: "same-origin" })
            .then(refresh)
            .catch(function () { btn.disabled = false; });
    });
    var handle = null;
    // SSE-driven refresh; the 30s interval is a safety net for the rare
    // case where the EventSource drops without auto-reconnect.
    function start() { if (!handle) { refresh(); handle = setInterval(refresh, 30000); } }
    function stop()  { if (handle) { clearInterval(handle); handle = null; } }
    document.addEventListener("visibilitychange", function () {
        if (document.hidden) stop(); else start();
    });
    document.addEventListener("bty-worker-state-changed", function (e) {
        if (e.detail && e.detail.kind === "hash") refresh();
    });
    document.addEventListener("bty-worker-events-connected", refresh);
    start();
})();
</script>

{% with events=hashing_events,
        title="Recent activity",
        link_to_full="/ui/events?subject_kind=image",
        card_id="hashing-activity" %}
{% include "ui/_events_card.html" %}
{% endwith %}
{% endblock %}