{{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="text-sm font-semibold uppercase tracking-[0.2em] text-[var(--muted)]">留言咨询</div>
    <h1 class="mt-2 text-3xl font-semibold text-[var(--text)] md:text-4xl">提交需求，我们尽快联系你</h1>
    <p class="mt-4 text-sm leading-7 text-[var(--muted)]">适合填写演示预约、方案咨询、报价需求和合作意向。</p>
    <form id="message-form" class="mt-8 grid gap-5">
      <div>
        <label class="mb-2 block text-sm font-medium text-[var(--text)]">姓名</label>
        <input class="w-full rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] px-4 py-3 outline-none focus:border-[var(--primary)]" type="text" name="nickname" required>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-[var(--text)]">电话</label>
        <input class="w-full rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] px-4 py-3 outline-none focus:border-[var(--primary)]" type="text" name="phone" required>
      </div>
      <div>
        <label class="mb-2 block text-sm font-medium text-[var(--text)]">需求说明</label>
        <textarea class="min-h-40 w-full rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] px-4 py-3 outline-none focus:border-[var(--primary)]" name="content" required></textarea>
      </div>
      {{if .Site.EnableCaptcha}}
      <div class="grid gap-3 md:grid-cols-[1fr_auto] md:items-end">
        <div>
          <label class="mb-2 block text-sm font-medium text-[var(--text)]">验证码</label>
          <input class="w-full rounded-2xl border border-[var(--border)] bg-[var(--surface-soft)] px-4 py-3 outline-none focus:border-[var(--primary)]" type="text" name="code" id="code" required>
          <input type="hidden" name="id" id="id">
        </div>
        <img id="refreshCaptcha" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAtCAMAAABS+V+kAAAAG1BMVEVHcEx6SOl4SOvjPGTjPGR5SOrjPGR5SOrjPGQZmST3AAAAB3RSTlMAgEC/QL+AqElEkgAAAAlwSFlzAAALEgAACxIB0t1+/AAAAn9JREFUWEftVdt2hCAMBFTw/7+4cwniarXtWx/IOYuoWSYzuZjStKnAVGAqMBWYCvx7BeqqEOPyY7i5/OjyS4e90nHdjZ+Wbqe/540mxNxyvMh9MxyzLcX17tBdl/1iC4D3HdD4rWFEoxmxta0Dc1faYbjbNrxGhP3ZI3UdvVeu1RdRxgIZekwShJBknBtOjwdFyLSWuUqQ/tK+r3aR+gD2JikFBOUvYwFMR+6b40nyrigt5yCuEVTQ6bW1BrVlqRX8g3rdg21B/JZbTD9shCJZ4MH1kOYb3gCoriqgmTqSzBwzImJW0RbRtLWomsb7EFevj4KzuhZ5ey4ulZIZLxVAQu45dqHjuYGhckM2aZmMuAE9PDwBtw2h0fcjnDvjFewkpQFUWwNY6VUwknlLlw4WpoGNB0CH4+yOzN+Q2TM7Cvow6qpGEh64O8VgW7L7OPFMV/AJWDpQBS4FOWHfY3kVewFTILlvCacwCIygrL6ZAB2oQ9oTsAGQCAP3AfJeXqqetef6LDUo93lmgoQCi2jQGzAkNnC3F8YVJUw3XGNknnIM8n16RKIhN/IXw/IOrEI+AT9mmTydRcytqDICQ3kFgnAcPERGUas1IXecR2CJMMrIwBictMPxVlsip0ZlD7txsJXxFRIvqZG7LRcKXHBw6V8HjDDO5TtwpNhBPRqBNTuikACJqS2Nwdfd9jmGu4AoOQjwCRzdbbT3YQ2IULSPLkuf0OTruehYVTTNL5+LJ7pTH7ORIYxbzcDX0TrYV9TtyOSR0vg6UeYo940IRZ9lmRKgzh0m4ONs/eNR5xXTIvFLYRs7JLw/VbWb0F+M+f+L//SdCkwFpgJTgX+gwBegpA+1GZ0ezwAAAABJRU5ErkJggg==" alt="点击获取验证码" class="h-14 cursor-pointer rounded-2xl border border-[var(--border)] bg-white p-1" title="点击获取验证码">
      </div>
      {{end}}
      <button type="submit" id="submit" class="w-fit rounded-full bg-[var(--primary)] px-6 py-3 text-sm font-semibold text-white">提交留言</button>
      <div id="form-message" class="hidden rounded-2xl px-4 py-3 text-sm"></div>
    </form>

    {{if Messages}}
    <div class="mt-10 grid gap-4">
      {{range Messages 10}}
      <div class="rounded-[1.5rem] border border-[var(--border)] bg-[var(--surface-soft)] p-4">
        <div class="text-sm text-[var(--muted)]">{{.Nickname}} · {{ParseTime .CreatedAt "2006-01-02"}}</div>
        <div class="mt-2 text-[var(--text)]">{{.Content}}</div>
      </div>
      {{end}}
    </div>
    {{end}}
  </section>
</main>

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