{{ template "header" . }}
<div class="flex flex-col gap-4">
    <div class="flex gap-2">
        <a href="/jobs" class="btn btn-sm {{ if not .Status }}btn-active{{ end }}">All</a>
        <a href="/jobs?status=received" class="btn btn-sm {{ if eq .Status "received" }}btn-active{{ end }}">Received</a>
        <a href="/jobs?status=processing" class="btn btn-sm {{ if eq .Status "processing" }}btn-active{{ end }}">Processing</a>
        <a href="/jobs?status=done" class="btn btn-sm {{ if eq .Status "done" }}btn-active{{ end }}">Done</a>
        <a href="/jobs?status=error" class="btn btn-sm {{ if eq .Status "error" }}btn-active{{ end }}">Error</a>
    </div>

    <div class="card bg-base-100 shadow">
        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Artist</th>
                            <th>Album</th>
                            <th>Duration</th>
                            <th>Status</th>
                            <th>Source</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ range .Jobs }}
                        <tr>
                            <td class="text-xs">{{ .CreatedAt.Format "2006-01-02 15:04" }}</td>
                            <td>{{ .Artist }}</td>
                            <td>{{ .Album }}</td>
                            <td>{{ if .DurationMs }}{{ formatDuration .DurationMs }}{{ else }}—{{ end }}</td>
                            <td>{{ statusBadge (printf "%s" .Status) }}</td>
                            <td><span class="badge">{{ .Source }}</span></td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="flex justify-between items-center">
        <span class="text-sm">Total: {{ .TotalCount }} jobs</span>
        <div class="join">
            {{ if gt .Page 1 }}
            <a href="/jobs?page={{ sub .Page 1 }}{{ if .Status }}&status={{ .Status }}{{ end }}" class="join-item btn btn-sm">Prev</a>
            {{ end }}
            <span class="join-item btn btn-sm btn-disabled">Page {{ .Page }}</span>
            {{ if gt .TotalCount (mul .Page .PageSize) }}
            <a href="/jobs?page={{ add .Page 1 }}{{ if .Status }}&status={{ .Status }}{{ end }}" class="join-item btn btn-sm">Next</a>
            {{ end }}
        </div>
    </div>
</div>
{{ template "footer" . }}