{{include "header.html"}}
{{include "nav.html"}}

<main class="mx-auto max-w-4xl px-4 py-10 sm:px-6 lg:px-8">
  <section class="rounded-[2rem] border border-[var(--border)] bg-white p-6 md:p-10">
    <div class="section-kicker">留言咨询</div>
    <h1 class="mt-4 text-4xl font-semibold">提交你的农场需求，我们会尽快联系你</h1>
    <form class="mt-8 grid gap-5">
      <div>
        <label class="mb-2 block text-sm font-medium">姓名</label>
        <input class="w-full rounded-xl border border-[var(--border)] px-4 py-3" type="text" name="nickname">
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium">电话</label>
        <input class="w-full rounded-xl border border-[var(--border)] px-4 py-3" type="text" name="phone">
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium">需求说明</label>
        <textarea class="min-h-40 w-full rounded-xl border border-[var(--border)] px-4 py-3" name="content"></textarea>
      </div>
      <button type="button" class="w-fit rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-medium text-white">提交留言</button>
    </form>
    {{if Messages}}
    <div class="mt-10 space-y-4">
      {{range Messages 10}}
      <div class="rounded-2xl bg-[var(--surface-soft)] p-4">
        <div class="text-sm text-[var(--muted)]">{{.Nickname}} · {{ParseTime .CreatedAt "2006-01-02"}}</div>
        <div class="mt-2">{{.Content}}</div>
      </div>
      {{end}}
    </div>
    {{end}}
  </section>
</main>

{{include "footer.html"}}
{{include "js.html"}}