{{include "header.html"}}
{{if .Content}}<script type="application/ld+json">{"@context":"https://schema.org","@type":"Article","headline":"{{.Content.Title}}","description":"{{.Content.Description}}","image":"{{.Content.Img}}","author":{"@type":"Person","name":"{{default .Content.Author .Content.User.Nickname}}"},"publisher":{"@type":"Organization","name":"{{if .Site}}{{.Site.Title}}{{else}}VVCMS{{end}}"},"datePublished":"{{ParseTime .Content.CreatedAt "2006-01-02T15:04:05Z07:00"}}","dateModified":"{{ParseTime .Content.UpdateAt "2006-01-02T15:04:05Z07:00"}}"}</script>{{end}}
{{include "nav.html"}}
{{include "bread.html"}}

<main class="max-w-6xl mx-auto px-4 py-8">
  <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
    <article class="lg:col-span-2">
      <div class="rounded-2xl border border-ink-200 bg-white overflow-hidden shadow-soft">
        <div class="aspect-[16/9] bg-ink-100">
          <img class="w-full h-full object-cover" src="{{default .Content.Img "https://picsum.photos/seed/portal-article/1600/900"}}" alt="{{.Content.Title}}" />
        </div>
        <div class="p-8">
          <div class="text-xs uppercase tracking-widest text-brand-700/80">{{.CurrentColumn.Name}}</div>
          <h1 class="mt-2 text-3xl md:text-4xl font-semibold tracking-tight">{{.Content.Title}}</h1>
          <div class="mt-4 flex flex-wrap gap-4 text-sm text-ink-600">
            <div>作者：{{default .Content.Author .Content.User.Nickname}}</div>
            {{if .Content.User.URL}}
              <a class="text-brand-700 hover:underline" href="{{.Content.User.URL}}">作者专栏</a>
            {{end}}
            <div>时间：{{ParseTime .Content.CreatedAt "2006-01-02"}}</div>
            <div>浏览：{{.Content.Views}}</div>
          </div>

          {{if .Content.Tags}}
          <div class="mt-5 flex flex-wrap gap-2">
            {{range .Content.Tags}}
              <a href="{{.URL}}" class="px-3 py-1.5 rounded-full text-xs bg-white border border-ink-200 hover:border-brand-500/30 hover:bg-brand-50">#{{.Name}}</a>
            {{end}}
          </div>
          {{end}}

          <div class="mt-8 prose max-w-none">
            {{Str2Html .Content.Content}}
          </div>
        </div>
      </div>

      <div class="mt-6 grid grid-cols-1 md:grid-cols-2 gap-4">
        {{if .Prev}}
          <a class="rounded-2xl border border-ink-200 bg-white p-6 shadow-soft hover:border-brand-500/30" href="{{.Prev.URL}}">
            <div class="text-xs text-ink-500">上一篇</div>
            <div class="mt-2 text-sm font-semibold">{{.Prev.Title}}</div>
          </a>
        {{end}}
        {{if .Next}}
          <a class="rounded-2xl border border-ink-200 bg-white p-6 shadow-soft hover:border-brand-500/30" href="{{.Next.URL}}">
            <div class="text-xs text-ink-500">下一篇</div>
            <div class="mt-2 text-sm font-semibold">{{.Next.Title}}</div>
          </a>
        {{end}}
      </div>

      <div class="mt-8">
        <div class="text-sm font-semibold">相关推荐</div>
        <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
          {{range Related .Content.Id 6}}
            <a class="rounded-2xl border border-ink-200 bg-white p-6 shadow-soft hover:border-brand-500/30" href="{{.URL}}">
              <div class="text-sm font-semibold hover:text-brand-700">{{.Title}}</div>
              <div class="mt-2 text-xs text-ink-500">{{ParseTime .CreatedAt "2006-01-02"}}{{if .Views}} · {{.Views}} 阅读{{end}}</div>
            </a>
          {{end}}
        </div>
      </div>

      {{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
      <div class="mt-8 rounded-2xl border border-ink-200 bg-white p-8 shadow-soft">
        <div class="text-sm font-semibold flex items-center gap-2">
          <i class="far fa-comments"></i>
          评论区
          {{$comments := ContentComment .Content.Id}}
          <span class="text-xs text-ink-500">({{len $comments}}条评论)</span>
        </div>

        <div class="mt-6 space-y-4">
          {{range $k, $v := $comments}}
          <div id="{{$v.Id}}" class="p-4 rounded-xl bg-ink-50 border border-ink-100">
            <div class="flex items-start gap-3">
              <div class="w-10 h-10 rounded-full bg-white border border-ink-200 flex items-center justify-center text-sm font-medium text-ink-600">
                {{slice $v.Nickname 0 1}}
              </div>
              <div class="flex-1">
                <div class="flex flex-wrap items-center justify-between gap-2">
                  <div class="flex items-center gap-2">
                    <span class="text-sm font-medium">{{$v.Nickname}}</span>
                    {{if ne 0 $v.Pid}}
                    <span class="text-xs text-ink-500">回复</span>
                    <a href="#{{$v.Pid}}" class="text-xs text-brand-600 hover:underline">{{$v.PNickname}}</a>
                    {{end}}
                  </div>
                  <span class="text-xs text-ink-500">{{ParseTime $v.CreatedAt ""}}</span>
                </div>
                <div class="mt-2 text-sm text-ink-700 whitespace-pre-wrap">{{$v.Content}}</div>
                <div class="mt-2">
                  <a class="rep text-xs text-brand-600 hover:text-brand-700 cursor-pointer" data-id="{{$v.Id}}" data-f="#{{$k}}" data-name="{{$v.Nickname}}">
                    <i class="far fa-comment-dots mr-1"></i>回复
                  </a>
                </div>
              </div>
            </div>
          </div>
          {{end}}
        </div>

        <div class="mt-8 pt-6 border-t border-ink-100">
          <h4 class="text-sm font-semibold mb-4">发表评论</h4>
          <form id="comment-form" class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
              <div>
                <label class="block text-xs font-medium text-ink-700 mb-1">昵称 <span class="text-red-500">*</span></label>
                <input type="text" id="nickname" name="nickname" placeholder="请输入昵称" required
                  class="w-full px-3 py-2 text-sm border border-ink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500">
              </div>
              <div>
                <label class="block text-xs font-medium text-ink-700 mb-1">邮箱 <span class="text-red-500">*</span></label>
                <input type="email" id="email" name="email" placeholder="请输入邮箱" required
                  class="w-full px-3 py-2 text-sm border border-ink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500">
              </div>
              <div>
                <label class="block text-xs font-medium text-ink-700 mb-1">网站</label>
                <input type="url" id="website" name="website" placeholder="选填"
                  class="w-full px-3 py-2 text-sm border border-ink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500">
              </div>
            </div>
            <div>
              <label class="block text-xs font-medium text-ink-700 mb-1">评论内容 <span class="text-red-500">*</span></label>
              <textarea id="content" name="content" rows="4" placeholder="请输入评论内容" required
                class="w-full px-3 py-2 text-sm border border-ink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 resize-vertical"></textarea>
            </div>
            <input name="article_id" value="{{.Content.Id}}" hidden>
            <input name="pid" id="pid" hidden>
            <input name="p_nickname" id="p_nickname" hidden>
            <input name="id" id="id" hidden>
            <div id="re" class="hidden px-3 py-2 rounded-lg bg-brand-50 text-brand-700 text-sm"></div>
            {{if and .Site (eq 1 .Site.EnableCaptcha)}}
            <div class="flex items-center gap-4">
              <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=="
                class="w-32 h-16 cursor-pointer rounded-lg border border-ink-200" lay-on="refreshCaptcha" title="点击获取验证码" alt="验证码">
              <div>
                <label class="block text-xs font-medium text-ink-700 mb-1">验证码 <span class="text-red-500">*</span></label>
                <input type="text" id="code" name="code" placeholder="请输入验证码" required
                  class="w-28 px-3 py-2 text-sm border border-ink-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500">
              </div>
            </div>
            {{end}}
            <div id="form-message" class="hidden px-3 py-2 rounded-lg text-sm"></div>
            <button type="button" id="submit"
              class="px-6 py-2 bg-brand-600 hover:bg-brand-700 text-white text-sm rounded-lg transition-colors">
              发表评论
            </button>
          </form>
        </div>
      </div>
      {{end}}
    </article>

    <div>
      {{include "sidebar.html"}}
    </div>
  </div>
</main>

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

{{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
<script>
  var csrf = '';
  var enableCaptcha = {{if and .Site (eq 1 .Site.EnableCaptcha)}}true{{else}}false{{end}};

  $(function () {
    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');
      }
    }

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

    $('.rep').click(function () {
      var aid = $(this).attr("data-id");
      var f = $(this).attr("data-f");
      var name = $(this).attr("data-name");
      if (!aid) return;
      $("#pid").val(aid);
      $("#p_nickname").val(name);
      $("#re").html("<p>回复 " + f + " <span class='font-medium text-brand-600'>@" + name + "</span></p>");
      $("#re").removeClass("hidden");
    });

    $('#submit').click(function () {
      var d = {};
      var t = $('#comment-form').serializeArray();
      $.each(t, function () {
        d[this.name] = this.value;
      });
      if (!d.nickname) {
        setFormMessage('error', '请填写昵称');
        return false;
      }
      if (!d.content) {
        setFormMessage('error', '请填写评论内容');
        return false;
      }
      if (enableCaptcha && (!d.code || !d.id)) {
        setFormMessage('error', '请填写验证码');
        return false;
      }
      d.article_id = parseInt(d.article_id);
      d.pid = parseInt(d.pid) || 0;

      var currentPath = window.location.pathname;
      var commentUrl = currentPath + (currentPath.endsWith('/') ? '' : '/') + 'comment';

      setSubmitting(true);
      $.ajax({
        url: commentUrl,
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        data: JSON.stringify(d),
        success: function (data) {
          if (data.code == 200) {
            setFormMessage('success', '评论已提交，审核通过后将会显示');
            $('#comment-form')[0].reset();
          } else {
            setFormMessage('error', data.msg || '提交失败，请稍后重试');
          }
          $("#re").addClass("hidden").html("");
          $("#pid").val(0);
          $("#p_nickname").val("");
          setSubmitting(false);
        },
        error: function () {
          setFormMessage('error', '提交失败，请检查网络后重试');
          $("#re").addClass("hidden").html("");
          $("#pid").val(0);
          $("#p_nickname").val("");
          setSubmitting(false);
        }
      });
      return false;
    });

    if (enableCaptcha) {
      $("#refreshCaptcha").trigger("click");
    }
  });
</script>
{{end}}