{{ 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 id="jobs-tbody"
                        {{ if .HasProcessing }}
                        hx-get="/partials/jobs?page={{ .Page }}{{ if .Status }}&status={{ .Status }}{{ end }}"
                        hx-trigger="every 3s"
                        hx-swap="innerHTML"
                        {{ end }}>
                        {{ template "partials/jobs_rows.html" . }}
                    </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" . }}