{% extends "layout.html" %}
{% block content %}

<div class="bg-white border rounded-xl shadow-sm overflow-hidden">
  <div class="px-5 py-4 border-b flex flex-col gap-3 md:flex-row md:items-center md:justify-between">
    <div class="flex items-center gap-3">
      <div class="inline-flex h-9 w-9 items-center justify-center rounded-lg bg-[#f06824]/10 text-[#f06824]">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 5h18M3 12h18M3 19h18" />
        </svg>
      </div>
      <div>
        <h2 class="text-lg font-semibold leading-tight">Logs</h2>
        <p class="text-sm text-gray-500">Latest task logs</p>
      </div>
    </div>

    <form id="log-filters" class="flex flex-wrap gap-2 items-center"
          hx-get="partials/table" hx-target="#logs-table" hx-swap="innerHTML"
          hx-trigger="change, submit from:#log-filters">
      <input name="task_id" placeholder="task id" class="rounded-lg border border-gray-200 px-3 py-2 text-sm" />
      <select name="level" class="rounded-lg border border-gray-200 px-3 py-2 text-sm">
        <option value="">Any level</option>
        <option>DEBUG</option>
        <option>INFO</option>
        <option>WARNING</option>
        <option>ERROR</option>
        <option>CRITICAL</option>
      </select>
      <input name="q" placeholder="search text" class="rounded-lg border border-gray-200 px-3 py-2 text-sm" />
      <input name="limit" value="200" class="w-24 rounded-lg border border-gray-200 px-3 py-2 text-sm" />
      <button class="rounded-lg bg-[#f06824] px-3 py-2 text-sm font-medium text-white hover:bg-[#e35d1e]">Filter</button>
    </form>
  </div>

  <div id="logs-table"
       hx-get="partials/table"
       hx-trigger="load once, every 10s"
       hx-swap="innerHTML"
       class="overflow-x-auto">
    {% include "logs/partials/table.html" %}
  </div>
</div>

{% endblock %}