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

{{if index .ThemesExt "show_breadcrumb"}}
{{if .Nav}}
<nav class="border-b border-slate-200 bg-white">
  <div class="vm-container py-3">
    <div class="vm-crumb">
      <a href="/">首页</a>
      {{range .Nav}}
      <span class="vm-crumb-sep">/</span>
      <a href="{{.URL}}">{{.Name}}</a>
      {{end}}
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Single}}
{{if .Single.Ext}}
{{$banner := index .Single.Ext "banner_img"}}
{{if $banner}}
<section class="relative h-64 md:h-80">
  <img src="{{$banner}}" alt="{{.Single.Name}}" class="w-full h-full object-cover">
  <div class="absolute inset-0 bg-black bg-opacity-40 flex items-center justify-center">
    <h1 class="text-4xl md:text-5xl font-bold text-white">{{.Single.Name}}</h1>
  </div>
</section>
{{end}}
{{end}}

<article class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
  <div class="grid grid-cols-1 lg:grid-cols-12 gap-8">
    <div class="lg:col-span-7">
      <div class="vm-hover-panel bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8 mb-8">
        <h2 class="text-2xl font-bold mb-6">联系方式</h2>
        {{/*
          联系方式读 .ThemesExt，读不到才回落占位文案。
          🚨 原来这里写死 400-123-4567 / contact@example.com：装了这套主题的
          每个站点都会展示同一串假号码，而主题文件升级会被覆盖回去。
          留空时整行不显示 —— 显示一串打不通的电话比不显示更糟。
        */}}
        {{$phone := index .ThemesExt "contact_phone"}}
        {{$email := index .ThemesExt "contact_email"}}
        {{$addr := index .ThemesExt "contact_address"}}
        {{$hours := index .ThemesExt "work_time"}}
        <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-1">
          {{if or $phone $email $addr $hours}}
          {{if $phone}}
          <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
            <div class="flex items-start">
              <div class="mr-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">☎</div>
              <div>
                <div class="font-medium text-slate-900">电话</div>
                <div class="text-sm text-slate-600">{{$phone}}</div>
              </div>
            </div>
          </div>
          {{end}}
          {{if $email}}
          <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
            <div class="flex items-start">
              <div class="mr-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">✉</div>
              <div>
                <div class="font-medium text-slate-900">邮箱</div>
                <div class="text-sm text-slate-600">{{$email}}</div>
              </div>
            </div>
          </div>
          {{end}}
          {{if $addr}}
          <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
            <div class="flex items-start">
              <div class="mr-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">⌂</div>
              <div>
                <div class="font-medium text-slate-900">地址</div>
                <div class="text-sm text-slate-600">{{$addr}}</div>
              </div>
            </div>
          </div>
          {{end}}
          {{if $hours}}
          <div class="rounded-xl border border-slate-100 bg-slate-50 p-4">
            <div class="flex items-start">
              <div class="mr-3 flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">⏱</div>
              <div>
                <div class="font-medium text-slate-900">工作时间</div>
                <div class="text-sm text-slate-600">{{$hours}}</div>
              </div>
            </div>
          </div>
          {{end}}
          {{else}}
          <p class="text-sm text-slate-500">尚未填写联系方式，可在后台「主题数据 → 联系方式」中配置。</p>
          {{end}}
        </div>
      </div>
    </div>

    <div class="lg:col-span-5">
      {{if eq 1 .Site.EnableMessage}}
      <div class="vm-hover-panel bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8 lg:sticky lg:top-8">
        <h2 class="text-2xl font-bold mb-6">给我们留言</h2>
        <form id="message-form" class="space-y-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">昵称</label>
            <input type="text" name="nickname" required class="vm-input">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">邮箱</label>
            <input type="email" name="email" required class="vm-input">
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">内容</label>
            <textarea name="message" rows="6" required class="vm-input"></textarea>
          </div>
          {{if .Site.EnableCaptcha}}
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">验证码</label>
            <div class="flex space-x-4">
              <input type="text" name="code" id="code" required class="vm-input vm-input-sm">
              <input type="hidden" name="id" id="id">
              <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-10 cursor-pointer" title="点击获取验证码">
            </div>
          </div>
          {{end}}
          <button type="submit" id="submit" class="vm-btn vm-btn-primary">
            提交留言
          </button>
          <div id="form-message" class="hidden p-3 rounded-md text-sm"></div>
        </form>
      </div>
      {{end}}
    </div>
  </div>
</article>
{{end}}

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

{{if eq 1 .Site.EnableMessage}}
<script>
  var csrf = '';

  $(document).ready(function() {
    if ($('#refreshCaptcha').length) {
      $('#refreshCaptcha').click(function() {
        $.ajax({
          url: "/api/public/captcha",
          type: "POST",
          contentType: "application/json; charset=utf-8",
          headers: {
            "X-CSRF-Token": csrf,
          },
          dataType: "json",
          success: function(data) {
            if (data.code == 200) {
              $("#id").val(data.data.id);
              $("#refreshCaptcha").attr("src", data.data.imgbase64);
              return false;
            } else {
              alert(data.msg || '验证码获取失败，请稍后重试');
              return false;
            }
          },
          error: function(data) {
            alert((data && data.msg) || '验证码获取失败，请稍后重试');
            return false;
          }
        });
        return false;
      });
    }

    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.removeClass('hidden bg-red-50 text-red-700 border-red-200 bg-green-50 text-green-700 border-green-200 border');
      if (type === 'success') {
        el.addClass('border bg-green-50 text-green-700 border-green-200');
      } else {
        el.addClass('border bg-red-50 text-red-700 border-red-200');
      }
      el.text(text);
    }

    function setSubmitting(submitting) {
      var btn = $('#submit');
      if (!btn.length) return;
      if (submitting) {
        btn.prop('disabled', true);
        btn.text('提交中...');
        btn.addClass('opacity-70 cursor-not-allowed');
      } else {
        btn.prop('disabled', false);
        btn.text('提交留言');
        btn.removeClass('opacity-70 cursor-not-allowed');
      }
    }

    $('#message-form').submit(function(e) {
      e.preventDefault();
      var formData = $(this).serializeArray();
      var data = {};
      $.each(formData, function(i, field) {
        data[field.name] = field.value;
      });
      data.article_id = 0;

      setSubmitting(true);
      $.ajax({
        url: '/message/create',
        type: 'POST',
        headers: {
          "X-CSRF-Token": csrf,
        },
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        data: JSON.stringify(data),
        success: function(response) {
          if (response.code == 200) {
            setFormMessage('success', '留言提交成功！感谢你的支持，我们会尽快回复。');
            $('#message-form')[0].reset();
          } else {
            setFormMessage('error', response.msg || '提交失败，请稍后重试');
          }
          setSubmitting(false);
        },
        error: function(xhr) {
          setFormMessage('error', '提交失败，请检查网络后重试');
          setSubmitting(false);
        }
      });
    });
  });
</script>
{{end}}