{# One backend's disk card. Context: `b` = {name, type, ssh, scanning, result, start_error?}.
   Swapped whole into #disk-<name> by the Refresh button and the scan poller. #}
<div class="bg-white rounded-lg shadow-md p-6">
    <div class="flex items-center justify-between flex-wrap gap-2">
        <div class="flex items-center gap-3">
            <h2 class="text-lg font-semibold text-gray-800">{{ b.name }}</h2>
            <span class="text-xs px-2 py-0.5 rounded bg-gray-100 text-gray-500">{{ b.type }}</span>
            {% if b.result and b.result.disk_avail_bytes is not none and b.result.disk_total_bytes %}
            {% set used_pct = ((b.result.disk_total_bytes - b.result.disk_avail_bytes) * 100 / b.result.disk_total_bytes) | round(0, 'floor') | int %}
            <span class="text-xs {% if used_pct >= 90 %}text-red-600{% elif used_pct >= 75 %}text-yellow-600{% else %}text-gray-500{% endif %}">
                <span class="font-medium">{{ b.result.disk_avail_bytes | disk_bytes }}</span> free ({{ used_pct }}% used)
            </span>
            {% endif %}
        </div>
        <div class="flex items-center gap-3">
            {% if b.result %}
            <span class="text-xs text-gray-400">scanned {{ b.result.scanned_at | age }} in {{ (b.result.duration_ms / 1000) | round(1) }}s</span>
            {% endif %}
            {% if not b.scanning and not b.cleaning %}
            {% if b.result %}
            {% set bulk = b.result.entries | selectattr("classification.value", "equalto", "orphaned")
                          | selectattr("kind.value", "in", ["clone", "agent", "stack", "log"]) | list %}
            {% if bulk %}
            {% set bulk_bytes = bulk | map(attribute="size_bytes") | select | sum %}
            <form hx-post="/disk/clean/{{ b.name }}" hx-target="#disk-{{ b.name }}" hx-swap="innerHTML"
                  hx-confirm="Delete {{ bulk | length }} orphaned entries ({{ bulk_bytes | disk_bytes or '0' }}) on {{ b.name }}? Orphaned clones may contain logs of forgotten runs (not archived). Agent workspaces with uncommitted or unpushed work are skipped automatically.">
                {% for e in bulk %}<input type="hidden" name="path" value="{{ e.path }}">{% endfor %}
                <button class="px-3 py-1.5 text-sm font-medium rounded-md bg-amber-600 text-white hover:bg-amber-700 transition-colors">
                    Clean up orphaned ({{ bulk | length }} · {{ bulk_bytes | disk_bytes or "0" }})
                </button>
            </form>
            {% endif %}
            {% endif %}
            <button hx-post="/disk/scan/{{ b.name }}" hx-target="#disk-{{ b.name }}" hx-swap="innerHTML"
                class="px-3 py-1.5 text-sm font-medium rounded-md bg-blue-600 text-white hover:bg-blue-700 transition-colors">
                {% if b.result %}Refresh{% else %}Scan{% endif %}
            </button>
            {% endif %}
        </div>
    </div>

    {% if b.start_error %}
    <p class="mt-3 text-sm text-red-600">{{ b.start_error }}</p>
    {% endif %}

    {% if b.scanning or b.cleaning %}
    <div class="mt-4 flex items-center gap-2 text-sm text-gray-500">
        <svg class="w-4 h-4 animate-spin {% if b.cleaning %}text-amber-500{% else %}text-blue-500{% endif %}" fill="none" viewBox="0 0 24 24">
            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
        </svg>
        {% if b.cleaning %}Cleaning up… a rescan follows automatically.{% else %}Scanning… this can take a while on large shared filesystems.{% endif %}
        {# Self-poller: re-swaps the card every few seconds; once the work is
           done the fresh card no longer contains this div, so polling stops. #}
        <span hx-get="/disk/partial?backend={{ b.name }}" hx-trigger="every 3s"
              hx-target="#disk-{{ b.name }}" hx-swap="innerHTML"></span>
    </div>
    {% elif b.result %}

    {% if b.report %}
    {% set rc = b.report.counts %}
    <div class="mt-4 text-xs rounded-md border px-3 py-2 {% if rc.failed %}border-red-200 bg-red-50 text-red-800{% elif rc.skipped %}border-amber-200 bg-amber-50 text-amber-800{% else %}border-green-200 bg-green-50 text-green-800{% endif %}">
        <span class="font-medium">Cleanup {{ b.report.finished_at | age }}:</span>
        deleted {{ rc.deleted }} ·
        freed {% if b.report.freed_is_lower_bound %}at least {% endif %}{{ b.report.freed_bytes | disk_bytes or "0" }} ·
        skipped {{ rc.skipped }} · failed {{ rc.failed }}
        {% if rc.skipped or rc.failed or b.report.errors %}
        <details class="mt-1">
            <summary class="cursor-pointer opacity-70">details</summary>
            {% for err in b.report.errors %}
            <div class="font-mono mt-0.5">{{ err }}</div>
            {% endfor %}
            {% for o in b.report.outcomes if o.outcome != "deleted" %}
            <div class="font-mono mt-0.5" title="{{ o.path }}">{{ o.path.rsplit("/", 1)[-1] }} — {{ o.outcome }}{% if o.reason %}: {{ o.reason }}{% endif %}</div>
            {% endfor %}
        </details>
        {% endif %}
    </div>
    {% endif %}

    {% set totals = b.result.totals_by_class %}
    <div class="mt-4 flex flex-wrap gap-2 text-xs">
        {% for cls, label, chip in [
            ("active", "Active", "bg-blue-100 text-blue-700"),
            ("referenced", "Referenced", "bg-green-100 text-green-700"),
            ("orphaned", "Orphaned", "bg-amber-100 text-amber-700"),
            ("unknown", "Unrecognized", "bg-gray-100 text-gray-600"),
        ] %}
        {% if cls in totals %}
        <span class="px-2 py-1 rounded {{ chip }}">
            {{ label }} · {{ totals[cls][0] }} {{ "entry" if totals[cls][0] == 1 else "entries" }} · {{ totals[cls][1] | disk_bytes or "0" }}
        </span>
        {% endif %}
        {% endfor %}
        <span class="px-2 py-1 rounded bg-gray-50 text-gray-500">
            Total {{ b.result.total_bytes | disk_bytes or "0" }}
        </span>
    </div>

    {# Batch-delete bar: hidden until the disk.html controller sees a checked
       row in this card, then it shows the count and posts every selected
       path (with allow_referenced for the referenced ones) to /disk/clean. #}
    <div class="dh-bar hidden mt-4 flex items-center gap-3 rounded-md border border-red-200 bg-red-50 px-3 py-2">
        <span class="dh-bar-text text-xs text-red-800"></span>
        <button type="button" data-dh-delete data-backend="{{ b.name }}"
                class="ml-auto px-3 py-1 text-xs font-medium rounded-md bg-red-600 text-white hover:bg-red-700 transition-colors">
            Delete selected
        </button>
    </div>

    {% for kind, title in [
        ("clone", "Repository clones"),
        ("agent", "Agent workspaces"),
        ("stack", "Software stacks"),
        ("log", "Logs & outputs"),
        {# Cache-root strays land here: most often an env a stack's prep
           built outside its STACK_DIR, which no other section can see. #}
        ("other", "Other files & environments"),
    ] %}
    {% set items = b.result.entries | selectattr("kind.value", "equalto", kind) | list %}
    {# clones/agents are created from a source checkout; show which one. #}
    {% set show_source = kind in ["clone", "agent"] %}
    {% set selectable = not b.scanning and not b.cleaning %}
    {% if items %}
    <div class="mt-5">
        <h3 class="text-sm font-semibold text-gray-700 mb-2">{{ title }}
            <span class="font-normal text-gray-400">({{ items | length }})</span>
        </h3>
        <div class="overflow-x-auto">
            {# Columns sort client-side off the tr data-* attributes (disk.html). #}
            <table class="w-full text-sm">
                <thead>
                    <tr class="text-left text-xs text-gray-400 border-b border-gray-100">
                        <th class="py-1.5 pr-2 w-6">
                            {% if selectable %}
                            <input type="checkbox" class="dh-check-all align-middle" title="Select all below">
                            {% endif %}
                        </th>
                        <th class="py-1.5 pr-4 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="name">Name<span class="dh-arrow"></span></th>
                        {% if show_source %}
                        <th class="py-1.5 pr-4 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="source">Source<span class="dh-arrow"></span></th>
                        {% endif %}
                        <th class="py-1.5 pr-4 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="class">Class<span class="dh-arrow"></span></th>
                        <th class="py-1.5 pr-4 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="size" data-sort-type="num">Size<span class="dh-arrow"></span></th>
                        <th class="py-1.5 pr-4 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="mtime" data-sort-type="num">Modified<span class="dh-arrow"></span></th>
                        <th class="py-1.5 font-medium cursor-pointer select-none hover:text-gray-600" data-sort="runs" data-sort-type="num">Runs<span class="dh-arrow"></span></th>
                        <th class="py-1.5"></th>
                    </tr>
                </thead>
                <tbody>
                    {% for e in items %}
                    {% set row_label = e.detail or e.path.rsplit("/", 1)[-1] %}
                    {% set deletable = e.kind.value in ["clone", "agent", "stack", "log"] and e.classification.value in ["orphaned", "referenced"] %}
                    <tr class="border-b border-gray-50"
                        data-name="{{ (row_label) | lower }}"
                        data-source="{{ (e.source or '') | lower }}"
                        data-class="{{ e.classification.value }}"
                        data-size="{{ e.size_bytes or 0 }}"
                        data-mtime="{{ e.mtime.timestamp() if e.mtime else 0 }}"
                        data-runs="{{ e.run_ids | length }}">
                        <td class="py-1.5 pr-2">
                            {% if deletable and selectable %}
                            <input type="checkbox" class="dh-check align-middle"
                                   data-path="{{ e.path }}"
                                   data-size="{{ e.size_bytes or 0 }}"
                                   data-ref="{{ '1' if e.classification.value == 'referenced' else '0' }}"
                                   title="Select for deletion">
                            {% endif %}
                        </td>
                        <td class="py-1.5 pr-4 font-mono text-xs text-gray-700" title="{{ e.path }}">
                            {{ row_label }}
                        </td>
                        {% if show_source %}
                        <td class="py-1.5 pr-4 text-xs text-gray-600">{{ e.source or "–" }}</td>
                        {% endif %}
                        <td class="py-1.5 pr-4">
                            {% set badge = {
                                "active": "bg-blue-100 text-blue-700",
                                "referenced": "bg-green-100 text-green-700",
                                "orphaned": "bg-amber-100 text-amber-700",
                                "unknown": "bg-gray-100 text-gray-600",
                            }[e.classification.value] %}
                            <span class="text-xs px-1.5 py-0.5 rounded {{ badge }}">{{ e.classification.value }}</span>
                        </td>
                        <td class="py-1.5 pr-4 text-gray-700">{{ e.size_bytes | disk_bytes or "?" }}</td>
                        <td class="py-1.5 pr-4 text-gray-500 text-xs">{{ e.mtime | age }}</td>
                        <td class="py-1.5 text-xs">
                            {% for rid in e.run_ids[:3] %}
                            <a href="/runs/{{ rid }}" class="text-blue-600 hover:underline">{{ rid[:8] }}</a>{% if not loop.last %}, {% endif %}
                            {% endfor %}
                            {% if e.run_ids | length > 3 %}<span class="text-gray-400">+{{ e.run_ids | length - 3 }}</span>{% endif %}
                            {% if not e.run_ids %}<span class="text-gray-300">–</span>{% endif %}
                        </td>
                        <td class="py-1.5 pl-2 text-right">
                            {% if selectable and deletable %}
                            <form hx-post="/disk/clean/{{ b.name }}" hx-target="#disk-{{ b.name }}" hx-swap="innerHTML"
                                  {% if e.classification.value == "referenced" %}
                                  hx-confirm="Delete {{ row_label }} ({{ e.size_bytes | disk_bytes or '?' }})? It is still referenced by run(s) {{ e.run_ids | join(', ') }} — any logs stored inside will be lost."
                                  {% else %}
                                  hx-confirm="Delete {{ row_label }} ({{ e.size_bytes | disk_bytes or '?' }})? It may contain logs of forgotten runs."
                                  {% endif %}>
                                <input type="hidden" name="path" value="{{ e.path }}">
                                {% if e.classification.value == "referenced" %}
                                <input type="hidden" name="allow_referenced" value="{{ e.path }}">
                                {% endif %}
                                <button class="text-xs text-red-500 hover:text-red-700 px-1" title="Delete {{ e.path }}">✕</button>
                            </form>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
    {% endif %}
    {% endfor %}

    {% if not b.result.entries %}
    <p class="mt-4 text-sm text-gray-500">No scripthut directories found on this backend.</p>
    {% endif %}

    {% if b.result.errors %}
    <div class="mt-4 text-xs text-red-600 font-mono space-y-0.5">
        {% for err in b.result.errors %}
        <div>{{ err }}</div>
        {% endfor %}
    </div>
    {% endif %}

    {% else %}
    <p class="mt-4 text-sm text-gray-500">Never scanned — press Scan to inventory this backend.</p>
    {% endif %}
</div>