{{define "content"}}
<header class="mb-12 border-l-4 border-amber-400 pl-5">
  <p class="mb-2 font-mono text-xs uppercase tracking-[0.3em] text-amber-400">Daily ledger</p>
  <h1 class="text-4xl font-black tracking-tight sm:text-6xl">Field Notes</h1>
  <p class="mt-3 text-stone-400">Small commitments, made concrete.</p>
</header>

<form action="/todos" method="post" class="mb-10 flex flex-col gap-3 sm:flex-row">
  <label for="title" class="sr-only">New task</label>
  <input id="title" name="title" required maxlength="200" autocomplete="off" placeholder="What needs doing?" class="min-w-0 flex-1 rounded-none border border-stone-700 bg-stone-900 px-4 py-3 text-base outline-none transition focus:border-amber-400 focus:ring-1 focus:ring-amber-400">
  <button class="bg-amber-400 px-6 py-3 font-bold text-stone-950 transition hover:bg-amber-300 focus:outline-none focus:ring-2 focus:ring-amber-200">Add note</button>
</form>

<section aria-label="Tasks">
  {{if .Todos}}
  <ul class="divide-y divide-stone-800 border-y border-stone-800">
    {{range .Todos}}
    <li class="group flex items-center gap-4 py-5">
      <form action="/todos/{{.ID}}/toggle" method="post">
        <button aria-label="Toggle {{.Title}}" class="flex h-7 w-7 items-center justify-center border-2 border-stone-600 text-stone-950 transition hover:border-amber-400 {{if .Completed}}border-amber-400 bg-amber-400{{end}}">
          {{if .Completed}}<span aria-hidden="true">✓</span>{{end}}
        </button>
      </form>
      <span class="min-w-0 flex-1 break-words text-lg {{if .Completed}}text-stone-500 line-through{{end}}">{{.Title}}</span>
      <form action="/todos/{{.ID}}/delete" method="post">
        <button class="px-2 py-1 font-mono text-xs uppercase tracking-widest text-stone-500 transition hover:text-red-400" aria-label="Delete {{.Title}}">Delete</button>
      </form>
    </li>
    {{end}}
  </ul>
  {{else}}
  <div class="border border-dashed border-stone-700 px-6 py-14 text-center text-stone-500">
    <p class="font-mono text-sm uppercase tracking-widest">The page is clear</p>
  </div>
  {{end}}
</section>
{{end}}