{jv:include file='header.html' /}
<link rel="stylesheet" href="/Template/default/mobile/skin/css/ask.css">

<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:typeurl}">{jv:typename}</a><span class="sep">/</span>
    <span class="cur">{jv:title}</span>
  </div>
</nav>

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

      {jv:if condition='(buy_error==1)'}
      <div class="qa-paybox" style="margin-bottom:20px;border-color:#ffa39e;background:#fff1f0"><p style="color:#ff4d4f">{jv:lang name='qa_bounty_insufficient' /}</p></div>
      {/jv:if}

      <section class="qd-question">
        <div class="qd-head">
          <h1 class="qd-title">{jv:title}</h1>
          <div class="qd-meta">
            {jv:if condition='(has_best_answer==1)'}
            <span class="chip chip-green">{jv:lang name='qa_status_solved' /}</span>
            {jv:else /}
            <span class="chip chip-orange">{jv:lang name='qa_status_waiting' /}</span>
            {/jv:if}
            {jv:if condition='(reward>0)'}
            <span class="qa-bounty">{jv:lang name='qa_bounty_tag' /} {jv:reward} {jv:bounty_currency}</span>
            {/jv:if}
            <span>{jv:lang name='qa_author_prefix' /}{jv:author}</span>
            <span>{jv:add_time|MyDate='Y-m-d H:i',###}</span>
            <span>{jv:lang name='qa_views' /} {jv:clicks}</span>
          </div>
        </div>
        <div class="qd-body">{jv:content/}</div>
        <div class="qd-tags">
          {jv:tagcloud num="8"}
          <a href="{jv:link}">{jv:tag}</a>
          {/jv:tagcloud}
        </div>
      </section>

      <section class="qd-answers">
        <div class="answer-head">
          <h2>{jv:lang name='qa_answer' /}</h2>
          <span class="cnt">{jv:lang name='qa_total_prefix' /} {jv:answer_count} {jv:lang name='qa_replies' /}</span>
        </div>

        {jv:answerlist}
        <div class="answer-item{jv:if condition='(is_best==1)'} is-best{/jv:if}">
          {jv:if condition='(is_best==1)'}
          <div class="ab-badge">{jv:lang name='qa_best' /}</div>
          {/jv:if}
          <div class="answer-avatar-wrap">
            {jv:if condition='avatar'}
            <img class="answer-avatar" src="{jv:avatar}" alt="{jv:author}" loading="lazy">
            {jv:else /}
            <span class="answer-avatar answer-avatar-ph">{jv:author}</span>
            {/jv:if}
          </div>
          <div class="answer-body">
            <div class="answer-name">
              {jv:author}
              {jv:if condition='(is_paid==1)'}
              <span class="answer-paid-tag">{jv:lang name='qa_pay_to_view' /} {jv:price}</span>
              {jv:if condition='(purchased==1)'}
              <span class="answer-purchased">({jv:lang name='qa_already_purchased' /})</span>
              {/jv:if}
              {/jv:if}
              <span class="fl">· {jv:add_time|MyDate='Y-m-d H:i',###}</span>
              {jv:if condition='(can_accept==1)'}
              {jv:if condition='(is_best==0)'}
              <form method="post" action="{jv:accept_url}" style="display:inline;margin-left:8px">
                <input type="hidden" name="answer_id" value="{jv:id}">
                <input type="hidden" name="question_id" value="{jv:question_id}">
                <button type="submit" class="btn-accept-answer">{jv:lang name='qa_accept_answer' /}</button>
              </form>
              {/jv:if}
              {/jv:if}
            </div>
            <div class="answer-text">{jv:safe_content/}</div>
          </div>
        </div>
        {/jv:answerlist}
      </section>

      {jv:if condition='(can_answer==1)'}
      <section class="qd-reply">
        <div class="answer-head">
          <h2>{jv:lang name='qa_i_answer' /}</h2>
        </div>
        <form method="post" action="{jv:answer_url}" class="reply-form" onsubmit="if(window.tinymce){tinymce.triggerSave();}">
          <input type="hidden" name="question_id" value="{jv:id}">
          <label class="reply-label">{jv:lang name='qa_free_content' /}</label>
          <textarea id="qa-answer-editor" name="content" rows="12" class="bl-tinymce-editor" placeholder="{jv:lang name='qa_answer_placeholder' /}"></textarea>
          {jv:if condition='(paid_view_enabled==1)'}
          <div class="reply-check">
            <label class="reply-check-label">
              <input type="checkbox" name="is_paid" value="1" id="qa_paid_cb" onchange="document.getElementById('qa_paid_wrap').style.display=this.checked?'block':'none'">
              <span>{jv:lang name='qa_set_paid' /}</span>
            </label>
          </div>
          <div id="qa_paid_wrap" style="display:none">
            <label class="reply-label">{jv:lang name='qa_paid_content' /}</label>
            <textarea id="qa-paid-editor" name="paid_content" rows="8" class="bl-tinymce-editor" placeholder="{jv:lang name='qa_paid_content_placeholder' /}"></textarea>
            <div class="reply-price-row">
              <label class="reply-label" style="margin-bottom:0">{jv:lang name='qa_paid_amount' /}</label>
              <input type="number" name="price" min="0.01" step="0.01" value="0" class="reply-price-input">
              <span class="reply-price-currency">{jv:answer_fund_name}</span>
            </div>
          </div>
          <input type="hidden" name="fund_id" value="{jv:answer_fund_id}">
          {/jv:if}
          <div class="reply-foot" style="margin-top:12px">
            <button type="button" id="qa-submit-btn" class="btn btn-primary" onclick="try{if(window.tinymce){tinymce.triggerSave();}}catch(e){}document.querySelector('.reply-form').submit();">{jv:lang name='qa_submit' /}</button>
          </div>
        </form>
      </section>
      {jv:else /}
      <section class="qd-reply">
        <div class="answer-head">
          <h2>{jv:lang name='qa_i_answer' /}</h2>
        </div>
        <div class="reply-blur-wrap">
          <div class="reply-blur-fake-editor">
            <div class="rbfe-toolbar"><span class="rbfe-btn"></span><span class="rbfe-btn"></span><span class="rbfe-btn"></span><span class="rbfe-btn"></span><span class="rbfe-sep"></span><span class="rbfe-btn"></span><span class="rbfe-btn"></span><span class="rbfe-btn"></span></div>
            <div class="rbfe-body"></div>
          </div>
          <div class="reply-blur-mask">
            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            <p>{jv:lang name='forum_login_to_reply_hint' /}</p>
            <a class="btn btn-primary" href="{jv:url}user/login">{jv:lang name='forum_login_to_reply' /}</a>
          </div>
        </div>
      </section>
      {/jv:if}

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='related_questions' /}</h3>
        <ul class="side-list">
          {jv:relevarticle loop="5"}
          <li><span class="rank r{jv:autoindex}">{jv:autoindex}</span><a href="{jv:arcurl}">{jv:title}</a></li>
          {/jv:relevarticle}
        </ul>
      </div>

      <div class="side-card">
        <h3 class="side-title">{jv:lang name='side_hot_tags' /}</h3>
        <div class="tag-cloud">
          {jv:tagcloud num="10"}
          <a href="{jv:link}">{jv:tag}</a>
          {/jv:tagcloud}
        </div>
      </div>

      <div class="side-ad">
        <h4>{jv:lang name='qa_ask' /}</h4>
        <p>{jv:lang name='qa_ask_tip_1' /}</p>
        <a class="btn btn-primary" href="{jv:url}question/ask">{jv:lang name='qa_submit_question' /}</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' /}