{{define "admin_services.html"}}
{{template "admin_shell_start" .}}
{{template "admin_services_panel" .}}
{{template "admin_shell_end" .}}
{{end}}

{{define "admin_services_partial.html"}}
{{template "admin_tabs_oob" .}}
{{template "admin_flash_oob" .}}
{{template "admin_services_panel" .}}
{{end}}

{{define "admin_services_panel"}}
<section class="grid gap-6">
  <section class="bg-white p-6 shadow-sm">
    <h1 class="mb-6 text-2xl font-semibold">Services</h1>
    <form method="post" action="/admin/services" class="grid gap-4 md:grid-cols-[1fr_1fr_120px_120px]">
      <input name="title" required placeholder="Title" class="border px-3 py-2">
      <input name="summary" required placeholder="Summary" class="border px-3 py-2">
      <input name="position" type="number" value="0" class="border px-3 py-2">
      <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" checked> Active</label>
      <textarea name="details" required rows="4" placeholder="Details" class="border px-3 py-2 md:col-span-4"></textarea>
      <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-4">Add service</button>
    </form>

    <div class="mt-8 grid gap-4">
      {{range .Services}}
      <article class="border border-neutral-200 p-4">
        <form method="post" action="/admin/services/{{.ID}}" class="grid gap-4 md:grid-cols-[1fr_1fr_120px_120px]">
          <input name="title" value="{{.Title}}" class="border px-3 py-2">
          <input name="summary" value="{{.Summary}}" class="border px-3 py-2">
          <input name="position" type="number" value="{{.Position}}" class="border px-3 py-2">
          <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" {{if .Active}}checked{{end}}> Active</label>
          <textarea name="details" rows="4" class="border px-3 py-2 md:col-span-4">{{.Details}}</textarea>
          <button class="w-fit bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Save</button>
        </form>
        <form method="post" action="/admin/services/{{.ID}}/delete" class="mt-2">
          <button class="text-sm text-red-700">Delete service</button>
        </form>
      </article>
      {{end}}
    </div>
  </section>

  <section class="bg-white p-6 shadow-sm">
    <h2 class="mb-6 text-2xl font-semibold">FAQs</h2>
    <form method="post" action="/admin/faqs" class="grid gap-4 md:grid-cols-[1fr_120px_120px]">
      <input name="question" required placeholder="Question" class="border px-3 py-2">
      <input name="position" type="number" value="0" class="border px-3 py-2">
      <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" checked> Active</label>
      <textarea name="answer" required rows="4" placeholder="Answer" class="border px-3 py-2 md:col-span-3"></textarea>
      <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-3">Add FAQ</button>
    </form>

    <div class="mt-8 grid gap-4">
      {{range .FAQs}}
      <article class="border border-neutral-200 p-4">
        <form method="post" action="/admin/faqs/{{.ID}}" class="grid gap-4 md:grid-cols-[1fr_120px_120px]">
          <input name="question" value="{{.Question}}" class="border px-3 py-2">
          <input name="position" type="number" value="{{.Position}}" class="border px-3 py-2">
          <label class="flex items-center gap-2 border px-3 py-2 text-sm"><input name="active" type="checkbox" {{if .Active}}checked{{end}}> Active</label>
          <textarea name="answer" rows="4" class="border px-3 py-2 md:col-span-3">{{.Answer}}</textarea>
          <button class="w-fit bg-neutral-950 px-5 py-2 text-sm uppercase tracking-[0.18em] text-white">Save</button>
        </form>
        <form method="post" action="/admin/faqs/{{.ID}}/delete" class="mt-2">
          <button class="text-sm text-red-700">Delete FAQ</button>
        </form>
      </article>
      {{end}}
    </div>
  </section>
</section>
{{end}}