{jv:include file='header.html' /}
<link rel="stylesheet" href="/Template/default/pc/skin/css/forum.css?v=6">

<nav class="crumb" aria-label="{jv:lang name='main_nav' /}">
  <div class="container">
    <a href="{jv:url}">{jv:lang name='home' /}</a><span class="sep">/</span>
    <a href="{jv:url}forum">{jv:lang name='forum_community' /}</a><span class="sep">/</span>
    <a href="{jv:board_url}">{jv:board_name}</a><span class="sep">/</span>
    <span class="cur">{jv:title}</span>
  </div>
</nav>

<div class="container">
  <div class="page-layout">
    <main class="page-main">

      <div class="post-box">
        <div class="post-head">
          <h1 class="post-title">{jv:title}</h1>
          <div class="post-head-meta">
            {jv:if condition='(is_top==1)'}
            <span class="chip chip-red">{jv:lang name='forum_sticky' /}</span>
            {/jv:if}
            {jv:if condition='(is_digest==1)'}
            <span class="chip chip-green">{jv:lang name='forum_essence' /}</span>
            {/jv:if}
            <span>{jv:lang name='forum_posted_at' /} {jv:add_time|MyDate='Y-m-d H:i',###}</span>
            <span>{jv:lang name='forum_views' /} {jv:clicks}</span>
            <span>{jv:lang name='forum_stat_replies' /} {jv:reply_count}</span>
          </div>
        </div>

        <div class="floor-item" style="border-bottom:none;">
          <div class="floor-side">
            {jv:if condition='avatar'}
            <img class="floor-avatar-img" src="{jv:avatar}" alt="{jv:author}">
            {jv:else /}
            <div class="floor-avatar">{jv:author}</div>
            {/jv:if}
            <div class="floor-name">{jv:author}</div>
            <div class="floor-level">{jv:level}</div>
          </div>
          <div class="floor-main">
            <div class="floor-num">1# · {jv:add_time|MyDate='Y-m-d H:i',###}</div>
            <div class="floor-text">{jv:content}</div>
            {jv:thread_attachment_html}
            <div class="floor-tools">
              <button>{jv:lang name='forum_like' /}</button>
              <button onclick="location.href='#reply-box'">{jv:lang name='forum_reply_btn' /}</button>
              <button onclick="navigator.clipboard&&navigator.clipboard.writeText(location.href)">{jv:lang name='forum_share' /}</button>
            </div>
            {jv:moderate_html}
          </div>
        </div>
        {jv:replies_html}
      </div>

      <div class="reply-box" id="reply-box">
        <h3 style="font-size:15px;font-weight:600;margin-bottom:12px;">{jv:lang name='forum_post_reply' /}</h3>
        {jv:reply_box_html}
      </div>

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='forum_related_threads' /}</h3>
        <ul class="side-list">
          {jv:related_html}
        </ul>
      </div>

      <div class="side-card">
        <h3 class="side-title">{jv:lang name='forum_board_nav' /}</h3>
        <div class="tag-cloud">
          <a href="{jv:url}forum">{jv:lang name='forum_cat_tech' /}</a>
          <a href="{jv:url}forum">{jv:lang name='forum_cat_resource' /}</a>
          <a href="{jv:url}forum">{jv:lang name='forum_cat_product' /}</a>
          <a href="{jv:url}forum">{jv:lang name='forum_cat_casual' /}</a>
        </div>
      </div>

      <div class="side-ad">
        <h4>{jv:lang name='forum_new_thread' /}</h4>
        <p>{jv:lang name='forum_board_notice_default' /}</p>
        <a class="btn btn-primary" href="{jv:url}forum">{jv:lang name='forum_publish' /}</a>
      </div>
    </aside>
  </div>
</div>

<script>
(function(){
  document.addEventListener('click', function(e){
    var btn = e.target.closest('.code-copy-btn');
    if(!btn) return;
    var codeId = btn.getAttribute('data-code-id');
    var pre = document.getElementById(codeId);
    if(!pre) return;
    var text = pre.innerText;
    var done = function(){
      btn.classList.add('copied');
      var txt = btn.querySelector('.code-copy-text');
      var orig = txt ? txt.textContent : '';
      if(txt){ txt.textContent = '{jv:lang name="forum_code_copied" /}'; }
      setTimeout(function(){
        btn.classList.remove('copied');
        if(txt){ txt.textContent = orig; }
      }, 1500);
    };
    if(navigator.clipboard && navigator.clipboard.writeText){
      navigator.clipboard.writeText(text).then(done).catch(function(){ fallbackCopy(text, done); });
    } else { fallbackCopy(text, done); }
  });
  function fallbackCopy(text, done){
    var ta = document.createElement('textarea');
    ta.value = text; ta.style.position='fixed'; ta.style.top='-9999px';
    document.body.appendChild(ta); ta.select();
    try{ document.execCommand('copy'); done(); }catch(e){}
    document.body.removeChild(ta);
  }
})();
</script>
{jv:editor_script}

{jv:include file='footer.html' /}