{{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}}
      <span class="vm-crumb-sep">/</span>
      <span class="text-slate-900">{{.Content.Title}}</span>
    </div>
  </div>
</nav>
{{end}}
{{end}}

{{if .Content}}
<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-8">
      <header class="mb-8">
        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{.Content.Title}}</h1>
        <div class="flex flex-wrap items-center gap-4 text-sm text-gray-500">
          <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="text-primary hover:text-blue-700">{{.Content.ColumnName}}</a></span>
          {{end}}
          {{if .Content.Views}}
          <span>阅读：{{.Content.Views}}</span>
          {{end}}
        </div>
      </header>

      {{if .Content.Img}}
      <div class="mb-8">
        <img src="{{.Content.Img}}" alt="{{.Content.Title}}" class="w-full rounded-lg">
      </div>
      {{end}}

      <div class="vm-rich">
        {{.Content.Content|Str2Html}}
      </div>

      {{if .Content.Tags}}
      <div class="mt-8 pt-8 border-t">
        <h3 class="text-lg font-semibold mb-4">标签</h3>
        <div class="flex flex-wrap gap-2">
          {{range .Content.Tags}}
          <a href="{{.URL}}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors">{{.Name}}</a>
          {{end}}
        </div>
      </div>
      {{end}}

      <div class="mt-8 pt-8 border-t flex justify-between gap-6">
        {{if .Prev}}
        <div class="text-left">
          <p class="text-sm text-gray-500 mb-1">上一篇</p>
          <a href="{{.Prev.URL}}" class="text-lg font-medium text-primary hover:text-blue-700">{{.Prev.Title}}</a>
        </div>
        {{end}}
        {{if .Next}}
        <div class="text-right ml-auto">
          <p class="text-sm text-gray-500 mb-1">下一篇</p>
          <a href="{{.Next.URL}}" class="text-lg font-medium text-primary hover:text-blue-700">{{.Next.Title}}</a>
        </div>
        {{end}}
      </div>

      {{if and .Content.EnableComment .Site (eq 1 .Site.EnableComment)}}
      <div class="vm-card mt-12 p-6 md:p-8">
        <h3 class="text-2xl font-bold mb-6">评论</h3>
        {{$comments := ContentComment .Content.Id}}
        <div id="comment-list" class="space-y-4">
          {{range $k, $v := $comments}}
          <div id="{{$v.Id}}" class="vm-card p-4">
            <div class="flex items-start gap-4">
              <div class="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
                {{$v.Nickname}}
              </div>
              <div class="flex-1">
                <div class="flex flex-wrap items-center justify-between mb-2 gap-2">
                  <div class="flex items-center gap-2">
                    <a href="#{{$v.Id}}" class="text-sm text-gray-500 hover:text-primary transition-colors">#{{$v.Id}}</a>
                    <h5 class="font-medium text-gray-900">{{$v.Nickname}}</h5>
                    {{if ne 0 $v.Pid}}
                    <span class="text-xs text-gray-500">回复</span>
                    <a href="#{{$v.Pid}}" class="text-xs text-primary hover:underline">{{$v.PNickname}}</a>
                    {{end}}
                  </div>
                  <span class="text-xs text-gray-500">{{ParseTime $v.CreatedAt ""}}</span>
                </div>

                <div class="text-gray-700 mb-3 whitespace-pre-wrap">{{$v.Content}}</div>

                <div class="flex items-center gap-4">
                  <a class="rep text-sm text-primary hover:text-blue-700 transition-colors" data-id="{{$v.Id}}" data-f="#{{$k}}" data-name="{{$v.Nickname}}">回复</a>
                  <a href="#{{$v.Id}}" class="text-sm text-gray-500 hover:text-primary transition-colors">链接</a>
                </div>
              </div>
            </div>
          </div>
          {{end}}
        </div>
        <div class="mt-8">
          <h4 class="text-lg font-semibold mb-4">发表评论</h4>
          <form id="comment-form" class="space-y-4">
            <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="hidden p-3 rounded-lg bg-blue-50 text-blue-700 text-sm"></div>
            <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="content" rows="4" 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">
                <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="button" id="submit" class="vm-btn vm-btn-primary">
              提交评论
            </button>
            <div id="form-message" class="hidden p-3 rounded-md text-sm"></div>
          </form>
        </div>
      </div>
      {{end}}
    </div>

    <aside class="lg:col-span-4">
      <div class="lg:sticky lg:top-8 space-y-6">
        <div class="vm-card p-6">
          <h3 class="text-lg font-bold text-gray-900 mb-4">最新文章</h3>
          {{$latest := Latest}}
          {{if $latest}}
          <div class="space-y-3">
            {{range $index, $_ := $latest}}
            <a href="{{(index $latest $index).URL}}" class="flex items-start gap-3 group">
              <span class="inline-flex h-6 w-6 flex-shrink-0 items-center justify-center rounded-full bg-gray-100 text-xs font-semibold text-gray-600 group-hover:bg-primary group-hover:text-white transition-colors">{{Add $index 1}}</span>
              <span class="text-sm font-medium text-gray-900 group-hover:text-primary transition-colors leading-6">{{(index $latest $index).Title}}</span>
            </a>
            {{end}}
          </div>
          {{else}}
          <p class="text-sm text-gray-500">暂无最新文章</p>
          {{end}}
        </div>

        <div class="vm-card p-6">
          <h3 class="text-lg font-bold text-gray-900 mb-4">标签</h3>
          {{$tags := Tags 20}}
          {{if $tags}}
          <div class="flex flex-wrap gap-2">
            {{range $tags}}
            <a href="{{.URL}}" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-sm hover:bg-gray-200 transition-colors">{{.Name}}</a>
            {{end}}
          </div>
          {{else}}
          <p class="text-sm text-gray-500">暂无标签</p>
          {{end}}
        </div>
      </div>
    </aside>
  </div>
</article>
{{end}}

{{/* ------------------------------------------------ 内容页深化：进度条 / 目录 / 分享 */}}
{{/*
  对标长文阅读体验：顶部阅读进度条 + 正文目录（h2/h3 自动锚点）+ 阅读时长 + 复制链接。
  全部用前端实现，不依赖后端新接口 —— 正文容器是稳定的 .vm-rich，
  扫不到标题（<2 个）就不渲染目录，避免出现空目录这种「看起来像坏了」的噪音。
*/}}
<div id="vv-read-progress" aria-hidden="true"
     style="position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:var(--vm-primary,#2563eb);transition:width .1s linear;"></div>
<script>
(function () {
  var body = document.querySelector('.vm-rich');
  if (!body) return;

  /* 1) 阅读进度条 */
  var bar = document.getElementById('vv-read-progress');
  function onScroll() {
    if (!bar) return;
    var h = document.documentElement.scrollHeight - window.innerHeight;
    var p = h > 0 ? (window.scrollY / h) : 0;
    bar.style.width = Math.min(100, Math.max(0, p * 100)) + '%';
  }
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();

  /* 2) 正文目录 + 阅读时长（300 字/分钟，仅作估算） */
  var heads = body.querySelectorAll('h2, h3');
  if (heads.length >= 2) {
    var toc = document.createElement('nav');
    toc.className = 'vm-card mb-6 p-5';
    toc.setAttribute('aria-label', '文章目录');

    var title = document.createElement('div');
    title.className = 'mb-3 text-sm font-semibold text-slate-900';
    var chars = (body.textContent || '').replace(/\s+/g, '').length;
    var mins = Math.max(1, Math.round(chars / 300));
    title.textContent = '目录 · 约 ' + mins + ' 分钟读完';
    toc.appendChild(title);

    var ul = document.createElement('ul');
    ul.className = 'space-y-1.5 text-sm';
    Array.prototype.forEach.call(heads, function (h, i) {
      if (!h.id) h.id = 'vv-sec-' + i;
      var li = document.createElement('li');
      var a = document.createElement('a');
      a.href = '#' + h.id;
      a.textContent = (h.textContent || '').trim();
      a.className = (h.tagName === 'H3')
        ? 'pl-3 text-slate-500 hover:text-primary'
        : 'font-medium text-slate-700 hover:text-primary';
      li.appendChild(a);
      ul.appendChild(li);
    });
    toc.appendChild(ul);

    if (body.parentNode) body.parentNode.insertBefore(toc, body);
  }

  /* 3) 复制链接 */
  var meta = document.querySelector('article header');
  if (meta) {
    var btn = document.createElement('button');
    btn.type = 'button';
    btn.className = 'vm-btn vm-btn-light vm-btn-sm';
    btn.textContent = '复制链接';
    btn.addEventListener('click', function () {
      var url = window.location.href;
      if (navigator.clipboard && navigator.clipboard.writeText) {
        navigator.clipboard.writeText(url).then(function () {
          btn.textContent = '已复制';
          setTimeout(function () { btn.textContent = '复制链接'; }, 2000);
        });
      }
    });
    meta.appendChild(btn);
  }
})();
</script>

{{/* vv-article-deepened */}}
{{include "footer.html"}}
{{include "js.html"}}

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

  $(document).ready(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');
      }
    }

    function parseXhrMsg(xhr) {
      try {
        if (xhr && xhr.responseJSON) {
          if (xhr.responseJSON.msg) return xhr.responseJSON.msg;
          if (xhr.responseJSON.message) return xhr.responseJSON.message;
        }
        if (xhr && xhr.responseText) {
          try {
            var obj = JSON.parse(xhr.responseText);
            if (obj && obj.msg) return obj.msg;
          } catch (e) {
            // ignore
          }
          return xhr.responseText;
        }
      } catch (e) {
        // ignore
      }
      return '';
    }

    $('.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-primary">@' + (name || '') + '</span></p>');
      $('#re').removeClass('hidden');
    });

    $('#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 {
            setFormMessage('error', data.msg || '验证码获取失败，请稍后重试');
            return false;
          }
        },
        error: function(xhr) {
          var msg = parseXhrMsg(xhr);
          setFormMessage('error', msg || '验证码获取失败，请稍后重试');
          return false;
        }
      });
      return false;
    });

    $('#submit').click(function() {
      var d = {};
      var t = $('#comment-form').serializeArray();
      $.each(t, 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);

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

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

  });
</script>
{{end}}