{{ template "header" . }}
<div class="flex flex-col gap-4">
    <div class="stats shadow bg-base-100" id="status-block" hx-get="/partials/status" hx-trigger="every 3s" hx-swap="outerHTML">
        <div class="stat">
            <div class="stat-title">Workers</div>
            <div class="stat-value">{{ .Workers }}</div>
        </div>
        <div class="stat">
            <div class="stat-title">Dry Run</div>
            <div class="stat-value text-2xl">
                {{ if .DryRun }}
                <span class="badge badge-warning">ON</span>
                {{ else }}
                <span class="badge badge-success">OFF</span>
                {{ end }}
            </div>
        </div>
        <div class="stat">
            <div class="stat-title">Work Window</div>
            <div class="stat-value text-2xl">
                {{ if .WorkWindowEnabled }}
                {{ .WorkWindowStart }}–{{ .WorkWindowEnd }}
                {{ else }}
                <span class="badge">disabled</span>
                {{ end }}
            </div>
        </div>
        <div class="stat">
            <div class="stat-title">Queue</div>
            <div class="stat-value">{{ .QueueLen }}</div>
        </div>
    </div>

    <div class="grid grid-cols-2 md:grid-cols-5 gap-4">
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title">Received</h2>
                <p class="text-4xl font-bold text-info">{{ .ReceivedCount }}</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title">Processing</h2>
                <p class="text-4xl font-bold text-warning">{{ .ProcessingCount }}</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title">Done</h2>
                <p class="text-4xl font-bold text-success">{{ .DoneCount }}</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title">Error</h2>
                <p class="text-4xl font-bold text-error">{{ .ErrorCount }}</p>
            </div>
        </div>
        <div class="card bg-base-100 shadow">
            <div class="card-body">
                <h2 class="card-title">Timeout</h2>
                <p class="text-4xl font-bold text-neutral">{{ .TimeoutCount }}</p>
            </div>
        </div>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body">
            <h2 class="card-title">Environment</h2>
            <ul class="text-sm">
                <li><span class="font-semibold">MUSIC_PATH:</span> <code>{{ .MusicPath }}</code></li>
                <li><span class="font-semibold">DB_PATH:</span> <code>{{ .DBPath }}</code></li>
                <li><span class="font-semibold">TIMEZONE:</span> <code>{{ .Timezone }}</code></li>
            </ul>
        </div>
    </div>
</div>
{{ template "footer" . }}