{{define "admin_contact_details.html"}}
{{template "admin_shell_start" .}}
{{template "admin_contact_details_panel" .}}
{{template "admin_shell_end" .}}
{{end}}

{{define "admin_contact_details_partial.html"}}
{{template "admin_tabs_oob" .}}
{{template "admin_flash_oob" .}}
{{template "admin_contact_details_panel" .}}
{{end}}

{{define "admin_contact_details_panel"}}
<section class="grid gap-6">
  <section class="bg-white p-6 shadow-sm">
    <h1 class="mb-6 text-2xl font-semibold">Contact Details</h1>
    <form method="post" action="/admin/contact-details" class="grid gap-4 md:grid-cols-3">
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Email</span><input name="email" value="{{.Content.Email}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Phone</span><input name="phone" value="{{.Content.Phone}}" class="w-full border px-3 py-2"></label>
      <label class="block text-sm"><span class="mb-2 block text-neutral-500">Location</span><input name="location" value="{{.Content.Location}}" class="w-full border px-3 py-2"></label>
      <button class="w-fit bg-neutral-950 px-5 py-3 text-sm uppercase tracking-[0.18em] text-white md:col-span-3">Save contact details</button>
    </form>
  </section>

  <section class="bg-white p-6 shadow-sm">
    <h2 class="mb-6 text-2xl font-semibold">Contact Requests</h2>
    <div class="grid gap-4">
      {{range .Contacts}}
      <article class="border border-neutral-200 p-4">
        <div class="mb-2 flex flex-col gap-1 text-sm md:flex-row md:items-center md:justify-between">
          <p class="font-medium">{{.Name}} · {{.Email}}{{if .Phone}} · {{.Phone}}{{end}}</p>
          <p class="text-neutral-500">{{.Status}} · {{.CreatedAt.Format "2006-01-02 15:04"}}</p>
        </div>
        <dl class="mb-3 grid gap-2 text-sm text-neutral-600 md:grid-cols-4">
          <div><dt class="text-neutral-400">Type</dt><dd>{{.ProjectType}}</dd></div>
          <div><dt class="text-neutral-400">Location</dt><dd>{{.ProjectLocation}}</dd></div>
          <div><dt class="text-neutral-400">Budget</dt><dd>{{.BudgetRange}}</dd></div>
          <div><dt class="text-neutral-400">Timeline</dt><dd>{{.Timeline}}</dd></div>
        </dl>
        <p class="text-neutral-700">{{.Message}}</p>
      </article>
      {{else}}
      <p class="text-neutral-500">No contact requests yet.</p>
      {{end}}
    </div>
  </section>
</section>
{{end}}