<!-- Tasks + Activity Panel -->
<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">Tasks</h3>
            <button hx-post="/tasks/cleanup" hx-target="#active-tasks" hx-swap="innerHTML"
                class="text-[10px] text-slate-300 hover:text-slate-500 transition-colors btn-press" title="Clear completed tasks">Clear done</button>
        </div>
        <form hx-post="/tasks/create" hx-target="#active-tasks" hx-swap="innerHTML" hx-on::after-request="this.reset()" class="mb-2">
            <input type="text" name="detail" placeholder="Add a task..." autocomplete="off"
                class="w-full text-[12px] text-slate-600 bg-slate-50/80 border border-slate-200/60 rounded-xl px-3 py-2 focus:outline-none focus:border-indigo-300 focus:ring-2 focus:ring-indigo-100 transition-all placeholder:text-slate-300" />
        </form>
        <div id="active-tasks" hx-get="/tasks/active" hx-trigger="load, every 3s" hx-swap="innerHTML">
        </div>
    </div>
    <div class="border-t border-slate-100/60 mx-4"></div>
    <div class="px-4 pt-3 pb-3">
        {{template "activity.html" .}}
    </div>
</div>