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

<section class="page-hero-dark">
  <div class="container page-hero-inner">
    <div>
      <span class="page-hero-badge">NEWS</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>200+</b><span>{jv:lang name='stat_countries' /}</span></div>
      <div class="ph-stat"><b>17</b><span>{jv:lang name='stat_lang_support' /}</span></div>
      <div class="ph-stat"><b>24/7</b><span>{jv:lang name='stat_service' /}</span></div>
      <div class="ph-stat"><b>500+</b><span>{jv:lang name='stat_modules' /}</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="news-layout">

    <main class="news-main">

      <div class="news-sort-bar">
        <div class="sort-links">
          <a class="active" href="{jv:typeurl}">{jv:lang name='sort_newest' /}</a>
        </div>
      </div>

      {jv:artlist orderby="new"}
      <article class="news-card">
        <a href="{jv:arcurl}">
          {jv:if condition='(litpic!="")'}
          <img class="news-thumb" src="{jv:litpic}" alt="{jv:title}">
          {jv:else /}
          <div class="news-thumb news-thumb-ph">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
          </div>
          {/jv:if}
        </a>
        <div class="news-body">
          <h2 class="news-title"><a href="{jv:arcurl}">{jv:title}</a></h2>
          <p class="news-excerpt">{jv:description}</p>
          <div class="news-meta">
            <span class="meta-item"><svg viewBox="0 0 24 24"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>{jv:author}</span>
            <span class="meta-item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>{jv:add_time|MyDate='Y-m-d',###}</span>
            <span class="meta-item"><svg viewBox="0 0 24 24"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>{jv:arcclick} {jv:lang name='read_count' /}</span>
            {jv:if condition='(is_paid==1)'}
            <span class="price-badge" style="margin-left:auto">{jv:lang name='mall_currency' /}{jv:price}</span>
            {jv:else /}
            <span class="price-free" style="margin-left:auto">{jv:lang name='free' /}</span>
            {/jv:if}
          </div>
        </div>
      </article>
      {/jv:artlist}

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

    </main>

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

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

      <div class="news-aside-ad">
        <h4>{jv:lang name='side_vip_title' /}</h4>
        <p>{jv:lang name='side_vip_desc' /}</p>
        <a class="btn btn-primary" href="{jv:url}user/register">{jv:lang name='side_vip_btn' /}</a>
      </div>
    </aside>
  </div>
</div>

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