{{define "partials/tab_storage.html"}}
<div class="flex justify-between items-center min-h-12 mb-6">
    <h1 class="text-2xl font-bold">Storage</h1>
</div>

<!-- GC Configuration -->
<div class="card bg-base-100 shadow-sm mb-6">
    <div class="card-body">
        <h2 class="card-title text-lg">Garbage Collection</h2>
        <div class="flex flex-wrap gap-2 mt-2">
            {{if .Enabled}}
            <span class="badge badge-success gap-1">{{ icon "check-circle" "size-3" }} Enabled</span>
            {{else}}
            <span class="badge badge-error gap-1">{{ icon "x-circle" "size-3" }} Disabled</span>
            {{end}}

            {{if .Running}}
            <span class="badge badge-warning gap-1">
                <span class="loading loading-spinner loading-xs"></span>
                Running
            </span>
            {{end}}
        </div>

        {{if .HasPreview}}
        <p class="text-sm text-base-content/50 mt-2">Last scan: {{.LastPreviewAge}}</p>
        {{end}}
        {{if .HasResult}}
        <p class="text-sm text-base-content/50">Last run: {{.LastResultAge}}</p>
        {{end}}
    </div>
</div>

<!-- Scan button -->
<div class="flex gap-3 mb-6">
    <button class="btn btn-primary gap-2"
            hx-post="/admin/api/gc/preview"
            hx-target="#gc-results"
            hx-swap="innerHTML"
            {{if .Running}}disabled{{end}}>
        {{ icon "search" "size-4" }}
        Scan for Orphans
    </button>
    <button class="btn btn-outline gap-2"
            hx-post="/admin/api/gc/backfill-configs"
            hx-target="#gc-results"
            hx-swap="innerHTML"
            hx-confirm="Backfill image config records from OCI config blobs in S3?"
            {{if .Running}}disabled{{end}}>
        {{ icon "refresh-cw" "size-4" }}
        Backfill Image Configs
    </button>
</div>

<div id="gc-results">
    {{if .Running}}
    <div hx-get="/admin/api/gc/status"
         hx-trigger="load delay:2s"
         hx-target="#gc-results"
         hx-swap="innerHTML">
        <div class="flex items-center gap-3 p-4 bg-base-100 rounded-lg shadow-sm">
            <span class="loading loading-spinner loading-md text-primary"></span>
            <div>
                <p class="font-medium">Operation in progress...</p>
                <p class="text-sm text-base-content/50">Checking status...</p>
            </div>
        </div>
    </div>
    {{end}}
</div>
{{end}}