<!-- Cron Jobs Panel -->
{{$crons := dashboard.CronJobs}}
<div class="panel-card">
    <div class="px-4 pt-3 pb-2">
        <div class="flex items-center justify-between mb-2">
            <h3 class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">Cron Jobs</h3>
            {{if $crons}}
            <span class="text-[10px] font-mono text-slate-300 bg-slate-50 px-1.5 py-0.5 rounded">{{len $crons}}</span>
            {{end}}
        </div>

        <!-- Add form — toggles open -->
        <button onclick="this.nextElementSibling.classList.toggle('hidden'); if(!this.nextElementSibling.classList.contains('hidden')) this.nextElementSibling.querySelector('input[name=schedule]').focus()"
            class="text-[10px] text-indigo-500 hover:text-indigo-600 font-medium transition-colors mb-2">+ Add cron job</button>
        <form class="hidden mb-3 space-y-1.5" hx-post="/cron/create" hx-target="#cron-list" hx-swap="innerHTML" hx-on::after-request="if(event.detail.successful) this.reset()">
            <input type="text" name="comment" placeholder="Description (optional)" autocomplete="off"
                class="w-full text-[11px] text-slate-600 bg-slate-50/80 border border-slate-200/60 rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 transition-all placeholder:text-slate-300" />
            <div class="flex gap-1.5">
                <input type="text" name="schedule" placeholder="*/5 * * * *" required autocomplete="off"
                    class="w-[110px] text-[11px] font-mono text-slate-600 bg-slate-50/80 border border-slate-200/60 rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 transition-all placeholder:text-slate-300" />
                <input type="text" name="command" placeholder="cd ~/repos/app && make test" required autocomplete="off"
                    class="flex-1 text-[11px] font-mono text-slate-600 bg-slate-50/80 border border-slate-200/60 rounded-lg px-2.5 py-1.5 focus:outline-none focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 transition-all placeholder:text-slate-300" />
            </div>
            <div class="flex justify-end">
                <button type="submit" class="text-[10px] font-medium text-white bg-indigo-500 hover:bg-indigo-600 px-3 py-1 rounded-md transition-colors">Add</button>
            </div>
        </form>
    </div>

    <div id="cron-list" hx-get="/cron" hx-trigger="load, every 10s" hx-swap="innerHTML">
    </div>
</div>