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

<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="dl-detail">

    <div class="dl-main">

      <header class="dl-head">
        <div class="dl-badges">
          <span class="chip chip-blue">{jv:typename}</span>
          {jv:if condition='(is_paid==1)'}
          <span class="chip chip-orange">{jv:lang name='dl_paid' /}</span>
          {jv:else /}
          <span class="chip chip-green">{jv:lang name='free' /}</span>
          {/jv:if}
        </div>
        <h1 class="dl-title">{jv:title}</h1>
        {jv:if condition='(subtitle!="")'}
        <p class="dl-sub">{jv:subtitle}</p>
        {/jv:if}
        <div class="dl-meta">
          <span class="dl-meta-item"><svg class="dl-meta-ico" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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:lang name='author' /}：{jv:author}</span>
          <span class="dl-meta-item"><svg class="dl-meta-ico" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>{jv:lang name='doc_published_at' /} {jv:add_time|MyDate='Y-m-d',###}</span>
          <span class="dl-meta-item"><svg class="dl-meta-ico" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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:lang name='read_count' /} {jv:arcclick}</span>
        </div>
      </header>

      <div class="dl-desc">
        <h3 class="dl-section-title"><span class="dl-title-bar"></span>{jv:lang name='dl_intro' /}</h3>
        <div class="doc-body">
          {jv:safe_content}
        </div>
      </div>

      {jv:action_button_bottom}

      <nav class="doc-nav">
        {jv:beafter get='pre'}
        <a href="{jv:arcurl}">
          <span class="nav-label">{jv:lang name='previous' /}</span>
          <span class="nav-title">{jv:title}</span>
        </a>
        {jv:else /}
        <span class="nav-label">{jv:lang name='no_previous' /}</span>
        {/jv:beafter}
        {jv:beafter get='next'}
        <a href="{jv:arcurl}" class="next">
          <span class="nav-label">{jv:lang name='next' /}</span>
          <span class="nav-title">{jv:title}</span>
        </a>
        {jv:else /}
        <span class="nav-label">{jv:lang name='no_next' /}</span>
        {/jv:beafter}
      </nav>

    </div>

    <aside class="dl-side">

      <div class="pay-panel">
        {jv:if condition='(is_paid==1)'}
        <div class="pp-price">
          <small>{jv:lang name='resource_price' /}</small>
          <b>{jv:price}</b>
        </div>
        {jv:else /}
        <div class="pp-price">
          <b class="pp-free">{jv:lang name='free' /}</b>
        </div>
        {/jv:if}
        <div class="pp-rows">
          <div class="pp-row"><span>{jv:lang name='dl_file_format' /}</span><b>{jv:file_ext}</b></div>
          <div class="pp-row"><span>{jv:lang name='dl_file_size' /}</span><b>{jv:file_size}</b></div>
          <div class="pp-row"><span>{jv:lang name='dl_file_count' /}</span><b>{jv:file_count}</b></div>
          <div class="pp-row"><span>{jv:lang name='dl_updated' /}</span><b>{jv:add_time|MyDate='Y-m-d',###}</b></div>
          {jv:if condition='(sold_count>0)'}
          <div class="pp-row"><span>{jv:lang name='dl_sold' /}</span><b>{jv:sold_count}</b></div>
          {/jv:if}
        </div>
        <div class="pp-btns">
          {jv:action_button}
        </div>
        <ul class="pp-tips">
          <li>{jv:lang name='dl_tip_1' /}</li>
          <li>{jv:lang name='dl_tip_2' /}</li>
          <li>{jv:lang name='dl_tip_3' /}</li>
        </ul>
      </div>

      <div class="side-card">
        <h3 class="side-title">{jv:lang name='side_hot_rank' /}</h3>
        <ul class="side-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>

    </aside>

  </div>

  <section class="dl-related-section">
    <div class="block-head">
      <h2 class="block-title">{jv:lang name='related_downloads' /}</h2>
      <a class="block-more" href="{jv:typeurl}">{jv:lang name='more' /}<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"/></svg></a>
    </div>
    <div class="download-grid download-grid-4">
      {jv:relevarticle loop="4"}
      <a class="card card-v" href="{jv:arcurl}">
        <img class="card-img" src="{jv:litpic}" alt="{jv:title}">
        <div class="card-body">
          <h3 class="card-title">{jv:title}</h3>
          <div class="card-foot">
            {jv:if condition='(is_paid==1)'}
            <span class="dl-price">{jv:lang name='mall_currency' /}{jv:price}</span>
            {jv:else /}
            <span class="dl-price dl-free">{jv:lang name='free' /}</span>
            {/jv:if}
            <span class="dl-date">{jv:add_time|MyDate='Y-m-d',###}</span>
          </div>
        </div>
      </a>
      {/jv:relevarticle}
    </div>
  </section>

</div>

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