{{ template "header.html" . }}


<div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
  <div class="sm:mx-auto sm:w-full sm:max-w-sm">
    <img class="mx-auto h-10 w-auto" src="/static/img/logo-black.png" alt="Your Company">
    <h2 class="mt-10 text-center text-2xl/9 font-bold tracking-tight text-gray-900">Invoices</h2>
  </div>

  {{ range .data.invoices }}
  <div class="w-full grid grid-cols-1 gap-4 mx-auto p-4 m-4 flex flex-wrap border rounded shadow-md max-w-4xl">
      <div class="">
        <div class="font-bold text-center mb-4">
          Invoice #{{ .ID }} - {{ .CreatedAt }}
        </div>
      </div>
        <div class="flex flex-col">
          {{ template "invoice.html" . }}
        </div>
        <div class="grid grid-cols-2 mt-4 flex flex-wrap gap-2 w-full">
    <form action="/invoice/{{ .ID }}" method="POST">
          <button type="submit" name="action" value="delete" class="bg-red-500 hover:bg-red-700 text-white text-sm/6 font-bold py-2 px-4 rounded">Delete</button>
    </form>
      </div>
      </div>
  {{ end }}
  </div>
  </div>
{{ template "footer.html" . }}