{{ template "header" . }}
<div class="flex flex-col gap-4">
    <form class="flex gap-2 flex-wrap" method="GET" action="/logs">
        <select name="level" class="select select-bordered select-sm">
            <option value="">All Levels</option>
            <option value="INFO" {{ if eq .Level "INFO" }}selected{{ end }}>INFO</option>
            <option value="WARN" {{ if eq .Level "WARN" }}selected{{ end }}>WARN</option>
            <option value="ERROR" {{ if eq .Level "ERROR" }}selected{{ end }}>ERROR</option>
            <option value="DEBUG" {{ if eq .Level "DEBUG" }}selected{{ end }}>DEBUG</option>
        </select>
        <input type="text" name="job_id" placeholder="Job ID" value="{{ .JobID }}" class="input input-bordered input-sm" />
        <button type="submit" class="btn btn-sm">Filter</button>
        {{ if or .Level .JobID }}
        <a href="/logs" class="btn btn-sm btn-ghost">Clear</a>
        {{ end }}
    </form>

    <div class="card bg-base-100 shadow">
        <div class="card-body p-0">
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>Timestamp</th>
                            <th>Level</th>
                            <th>Job ID</th>
                            <th>Message</th>
                        </tr>
                    </thead>
                    <tbody>
                        {{ range .Logs }}
                        <tr>
                            <td class="text-xs whitespace-nowrap">{{ .Timestamp.Format "2006-01-02 15:04:05" }}</td>
                            <td>{{ statusBadge .Level }}</td>
                            <td class="font-mono text-xs">{{ .JobID }}</td>
                            <td>{{ .Message }}</td>
                        </tr>
                        {{ end }}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="flex justify-between items-center">
        <span class="text-sm">Total: {{ .TotalCount }} logs</span>
        <div class="join">
            {{ if gt .Page 1 }}
            <a href="/logs?page={{ sub .Page 1 }}{{ if .Level }}&level={{ .Level }}{{ end }}{{ if .JobID }}&job_id={{ .JobID }}{{ 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="/logs?page={{ add .Page 1 }}{{ if .Level }}&level={{ .Level }}{{ end }}{{ if .JobID }}&job_id={{ .JobID }}{{ end }}" class="join-item btn btn-sm">Next</a>
            {{ end }}
        </div>
    </div>
</div>
{{ template "footer" . }}