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

<main class="enterprise-shell enterprise-page">
  {{if index .ThemesExt "show_breadcrumb"}}
  {{if .Nav}}
  <div class="enterprise-section enterprise-breadcrumb">
    <div class="enterprise-breadcrumb-trail">
      <a href="/" class="enterprise-text-primary enterprise-text-no-decoration">首页</a>
      {{range .Nav}}
      <span class="enterprise-muted">/</span>
      <a href="{{.URL}}" class="enterprise-text-no-decoration">{{.Name}}</a>
      {{end}}
      <span class="enterprise-muted">/</span>
      <span>{{.Content.Title}}</span>
    </div>
  </div>
  {{end}}
  {{end}}

  {{if .Content}}
  <article class="enterprise-section">
    <header class="enterprise-mb-lg">
      <div class="enterprise-kicker">Article</div>
      <h1 class="enterprise-title">{{.Content.Title}}</h1>
      <div class="enterprise-muted enterprise-flex-row enterprise-flex-wrap enterprise-align-center enterprise-card-gap-lg enterprise-mt-md">
        <span>{{ParseTime .Content.CreatedAt "2006-01-02"}}</span>
        {{if .Content.Author}}<span>作者：{{.Content.Author}}</span>{{end}}
        {{if .Content.ColumnName}}<span>分类：<a href="{{.Content.ColumnURL}}" class="enterprise-text-primary"> {{.Content.ColumnName}}</a></span>{{end}}
        {{if .Content.Views}}<span>阅读：{{.Content.Views}}</span>{{end}}
      </div>
    </header>

    {{if .Content.Img}}
        <div class="enterprise-card enterprise-card-margin">
      <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="enterprise-card-min-h-article enterprise-hero-cover">
    </div>
    {{end}}

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

    {{if .Content.Tags}}
    <div class="enterprise-mt-lg enterprise-padding-top-lg enterprise-border-top">
      <div class="enterprise-mb-sm enterprise-spec-title">标签</div>
      <div class="enterprise-flex-row enterprise-flex-wrap enterprise-card-gap">
        {{range .Content.Tags}}
        <a class="enterprise-pill enterprise-pill-soft enterprise-text-no-decoration" href="{{.URL}}">{{.Name}}</a>
        {{end}}
      </div>
    </div>
    {{end}}

    {{if or .Prev .Next}}
    <div class="enterprise-related-section">
      <div class="enterprise-kicker">Navigation</div>
      <h2 class="enterprise-font-xxl-tight enterprise-spacing-bottom-md enterprise-spacing-top-sm">上下篇</h2>
      <div class="enterprise-grid enterprise-grid-2 enterprise-card-gap-lg">
        {{if .Prev}}
        <a class="enterprise-card enterprise-text-no-decoration" href="{{.Prev.URL}}">
          <div class="enterprise-card-body">
            <div class="enterprise-muted enterprise-font-smaller">上一篇</div>
            <div class="enterprise-card-title enterprise-spacing-top-sm">{{.Prev.Title}}</div>
          </div>
        </a>
        {{end}}
        {{if .Next}}
        <a class="enterprise-card enterprise-text-no-decoration" href="{{.Next.URL}}">
          <div class="enterprise-card-body">
            <div class="enterprise-muted enterprise-font-smaller">下一篇</div>
            <div class="enterprise-card-title enterprise-spacing-top-sm">{{.Next.Title}}</div>
          </div>
        </a>
        {{end}}
      </div>
    </div>
    {{end}}
  </article>

  {{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
  <section class="enterprise-section">
    <div class="enterprise-kicker">Comments</div>
    <h2 class="enterprise-section-title enterprise-font-xxl-tight">评论</h2>
    {{$comments := ContentComment .Content.Id}}
    <div id="comment-list" class="enterprise-display-grid enterprise-card-gap-lg">
      {{range $k, $v := $comments}}
      <div class="enterprise-card" id="{{$v.Id}}">
        <div class="enterprise-card-body">
          <div class="enterprise-flex-between enterprise-align-start enterprise-card-gap-lg">
            <div>
              <div class="enterprise-card-stats-value">{{$v.Nickname}}{{if ne 0 $v.Pid}} <span class="enterprise-muted">回复</span> <a href="#{{$v.Pid}}" class="enterprise-text-primary">{{$v.PNickname}}</a>{{end}}</div>
              <div class="enterprise-muted enterprise-font-smaller">#{{$v.Id}} · {{ParseTime $v.CreatedAt ""}}</div>
            </div>
          </div>
          <div class="enterprise-mt-md enterprise-line-18 enterprise-white-space-prewrap">{{$v.Content}}</div>
          <div class="enterprise-mt-md">
            <a class="rep enterprise-text-primary enterprise-text-no-decoration" href="javascript:void(0)" data-id="{{$v.Id}}" data-f="#{{$k}}" data-name="{{$v.Nickname}}">回复</a>
          </div>
        </div>
      </div>
      {{end}}
    </div>
    <div class="enterprise-mt-lg">
      <h3 class="enterprise-mb-md enterprise-padding-top-none">发表评论</h3>
      <form id="comment-form" class="enterprise-form-box">
        <input type="hidden" name="article_id" value="{{.Content.Id}}">
        <input type="hidden" name="pid" id="pid" value="0">
        <input type="hidden" name="p_nickname" id="p_nickname">
        <input type="hidden" name="id" id="id">
        <div id="re" class="enterprise-reply-box"></div>
        <div class="enterprise-form-field">
          <label>昵称</label>
          <input type="text" name="nickname" required>
        </div>
        <div class="enterprise-form-field">
          <label>邮箱</label>
          <input type="email" name="email" required>
        </div>
        <div class="enterprise-form-field">
          <label>内容</label>
          <textarea name="content" rows="5" required></textarea>
        </div>
        {{if .Site.EnableCaptcha}}
        <div>
          <label>验证码</label>
          <div class="enterprise-inline-form-row">
            <input type="text" name="code" id="code" required class="enterprise-width-code">
            <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="enterprise-captcha-img" title="点击获取验证码">
          </div>
        </div>
        {{end}}
        <button type="button" id="submit" class="enterprise-btn">提交评论</button>
        <div id="form-message" class="enterprise-feedback"></div>
      </form>
    </div>
  </section>
  {{end}}
  {{end}}
</main>

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

{{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
<script>
  var enableCaptcha = !!document.getElementById('refreshCaptcha');

  $(document).ready(function() {
    function setFormMessage(type, text) {
      var el = $('#form-message');
      if (!el.length) return;
      el.show().text(text).css({
        border: '1px solid ' + (type === 'success' ? '#86efac' : '#fecaca'),
        background: type === 'success' ? '#f0fdf4' : '#fef2f2',
        color: type === 'success' ? '#166534' : '#991b1b'
      });
    }

    function setSubmitting(submitting) {
      var btn = $('#submit');
      if (!btn.length) return;
      btn.prop('disabled', submitting).text(submitting ? '提交中...' : '提交评论');
    }

    $('.rep').click(function() {
      var aid = $(this).attr('data-id');
      var f = $(this).attr('data-f');
      var name = $(this).attr('data-name');
      $('#pid').val(aid);
      $('#p_nickname').val(name || '');
      $('#re').html('回复 ' + (f || '') + ' @' + (name || '')).show();
      return false;
    });

    $('#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 || '验证码获取失败，请稍后重试');
          }
        }
      });
      return false;
    });

    $('#submit').click(function() {
      var d = {};
      $.each($('#comment-form').serializeArray(), function() { d[this.name] = this.value; });
      if (!d.nickname || d.nickname.trim() === '') {
        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);

      setSubmitting(true);
      $.ajax({
        url: window.location.pathname + '/comment',
        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();
            $('#re').hide();
          } else {
            setFormMessage('error', data.msg || '提交失败，请稍后重试');
          }
          setSubmitting(false);
        },
        error: function() {
          setFormMessage('error', '提交失败，请检查网络后重试');
          setSubmitting(false);
        }
      });
      return false;
    });
  });
</script>
{{end}}