{{if .}}
<div class="px-1 pb-1">
{{range $job := .}}
    <div class="group/cron flex items-start gap-2.5 rounded-xl px-3 py-2 hover:bg-white/60 hover:shadow-sm hover:shadow-slate-200/50 transition-all duration-200">
        <div class="shrink-0 mt-0.5">
            <svg xmlns="http://www.w3.org/2000/svg" class="w-3.5 h-3.5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
        </div>
        <div class="flex-1 min-w-0">
            {{if $job.Comment}}
            <span class="text-[12px] text-slate-600 font-medium truncate block">{{$job.Comment}}</span>
            {{end}}
            <span class="text-[10px] font-mono text-slate-400 truncate block" title="{{$job.Command}}">{{$job.Command}}</span>
            <span class="text-[10px] text-indigo-400/70 font-mono">{{$job.Describe}}</span>
        </div>
        <form class="shrink-0 opacity-0 group-hover/cron:opacity-100 transition-opacity" hx-post="/cron/delete" hx-target="#cron-list" hx-swap="innerHTML">
            <input type="hidden" name="schedule" value="{{$job.Schedule}}" />
            <input type="hidden" name="command" value="{{$job.Command}}" />
            <button type="submit" class="w-5 h-5 inline-flex items-center justify-center rounded text-slate-200 hover:text-red-400 hover:bg-red-50 transition-colors" title="Delete">
                <svg xmlns="http://www.w3.org/2000/svg" class="w-2.5 h-2.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" /></svg>
            </button>
        </form>
    </div>
{{end}}
</div>
{{else}}
<div class="text-center py-4 px-4 pb-4">
    <div class="inline-flex items-center justify-center w-10 h-10 rounded-xl bg-slate-50 mb-3">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 text-slate-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5"><path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>
    </div>
    <p class="text-[12px] text-slate-400 mb-1">No cron jobs</p>
    <p class="text-[11px] text-slate-300">Schedule recurring tasks from here or from the terminal</p>
</div>
{{end}}