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

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">Q&amp;A</span>
      <h1 class="page-hero-title">{jv:typename}</h1>
      <p class="page-hero-sub">{jv:description}</p>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b>{jv:qa_total_count}</b><span>{jv:lang name='qa_stat_questions' /}</span></div>
      <div class="ph-stat"><b>{jv:qa_total_answers}</b><span>{jv:lang name='qa_stat_answers' /}</span></div>
      <div class="ph-stat"><b>{jv:qa_solve_rate}</b><span>{jv:lang name='qa_stat_solved' /}</span></div>
    </div>
  </div>
</section>

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

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

      <div class="filter-bar">
        <span class="filter-label">{jv:lang name='qa_filter_status' /}</span>
        <div class="filter-tabs">
          <a class="filter-tab{jv:if condition='(qa_status=="all")'} active{/jv:if}" href="{jv:typeurl}?status=all&sort={jv:qa_sort}">{jv:lang name='qa_status_all' /}</a>
          <a class="filter-tab{jv:if condition='(qa_status=="solved")'} active{/jv:if}" href="{jv:typeurl}?status=solved&sort={jv:qa_sort}">{jv:lang name='qa_status_solved' /}</a>
          <a class="filter-tab{jv:if condition='(qa_status=="waiting")'} active{/jv:if}" href="{jv:typeurl}?status=waiting&sort={jv:qa_sort}">{jv:lang name='qa_status_waiting' /}</a>
          <a class="filter-tab{jv:if condition='(qa_status=="bounty")'} active{/jv:if}" href="{jv:typeurl}?status=bounty&sort={jv:qa_sort}">{jv:lang name='qa_status_bounty' /}</a>
        </div>
        <span class="filter-label" style="margin-left:16px">{jv:lang name='qa_filter_category' /}</span>
        <div class="filter-tabs">
          <a class="filter-tab{jv:if condition='(qa_is_parent==1)'} active{/jv:if}" href="{jv:qa_parent_url}?sort={jv:qa_sort}">{jv:lang name='all' /}</a>
          {jv:qacatlist}
          <a class="filter-tab{jv:if condition='(is_active==1)'} active{/jv:if}" href="{jv:typeurl}?sort={jv:qa_sort}">{jv:name}</a>
          {/jv:qacatlist}
        </div>
      </div>

      <div class="sort-bar">
        <div class="sort-links">
          <a class="filter-tab{jv:if condition='(qa_sort=="newest")'} active{/jv:if}" href="{jv:typeurl}?status={jv:qa_status}&sort=newest">{jv:lang name='qa_sort_newest' /}</a>
          <a class="filter-tab{jv:if condition='(qa_sort=="answers")'} active{/jv:if}" href="{jv:typeurl}?status={jv:qa_status}&sort=answers">{jv:lang name='qa_sort_answers' /}</a>
          <a class="filter-tab{jv:if condition='(qa_sort=="views")'} active{/jv:if}" href="{jv:typeurl}?status={jv:qa_status}&sort=views">{jv:lang name='qa_sort_views' /}</a>
          <a class="filter-tab{jv:if condition='(qa_sort=="bounty")'} active{/jv:if}" href="{jv:typeurl}?status={jv:qa_status}&sort=bounty">{jv:lang name='qa_sort_bounty' /}</a>
        </div>
        <span>{jv:lang name='qa_total_prefix' /} {jv:qa_list_count} {jv:lang name='qa_total_suffix' /}</span>
      </div>

      {jv:artlist}
      <article class="qa-card">
        <div class="qa-count">
          <b>{jv:answer_count}</b>
          <span>{jv:lang name='qa_replies' /}</span>
        </div>
        <div class="qa-main">
          <h3 class="qa-title">
            <a href="{jv:arcurl}">{jv:title}</a>
          </h3>
          <p class="qa-excerpt">{jv:description}</p>
          <div class="qa-card-meta">
            {jv:if condition='(best_answer_id>0)'}
            <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',###}</span>
            <span>{jv:lang name='qa_views' /} {jv:clicks}</span>
          </div>
        </div>
      </article>
      {/jv:artlist}

      {jv:listitem="en" listsize="7" /}

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='qa_side_waiting' /}</h3>
        <ul class="side-list">
          {jv:qaunsolved loop="5"}
          <li><span class="rank r{jv:autoindex}">{jv:autoindex}</span><a href="{jv:url}question/{jv:id}.html">{jv:title}</a></li>
          {/jv:qaunsolved}
        </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>

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