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

<section class="page-hero-dark search-hero-dark">
  <div class="container page-hero-inner">
    <div class="search-hero-left">
      <span class="page-hero-badge">{jv:lang name='search_results' /}</span>
      <h1 class="page-hero-title">{jv:if condition='search_keyword != ""'}{jv:search_keyword}{jv:else /}{jv:lang name='search_placeholder' /}{/jv:if}</h1>
      <p class="page-hero-sub">{jv:search_count_text}</p>
      <form class="search-bar-main" action="{jv:url}search.html" method="get">
        <svg class="sbm-icon" viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/></svg>
        <input type="text" name="q" value="{jv:search_keyword}" placeholder="{jv:lang name='search_placeholder' /}" class="search-input-main">
        <button type="submit" class="btn btn-primary">{jv:lang name='search_btn' /}</button>
      </form>
    </div>
    <div class="page-hero-stats">
      <div class="ph-stat"><b>{jv:search_count}</b><span>{jv:lang name='search_results' /}</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>
  </div>
</section>

<nav class="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:lang name='search_results' /}</span>
  </div>
</nav>

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

      {jv:if condition='search_count > 0'}
      <div class="search-tabs-wrap">
        <div class="search-tabs" role="tablist">
          {jv:searchtabs}
          <a href="javascript:void(0)" class="search-tab{jv:tab_active_class}" data-tab="{jv:key}" onclick="searchSwitchTab('{jv:key}')">
            <span class="st-name">{jv:name}</span>
            <span class="st-count">{jv:count}</span>
          </a>
          {/jv:searchtabs}
        </div>

        <div class="search-panels">
          {jv:searchtabs}
          <div class="search-panel" data-tab="{jv:key}" style="{jv:tab_panel_style}">
            {jv:if condition='count > 0'}
            <div class="search-results-list">
            {jv:searchtabrows}
            <article class="art-card">
              {jv:if condition='(litpic!="")'}
              <a href="{jv:arcurl}">
                <img class="art-thumb" src="{jv:litpic}" alt="{jv:title}">
              </a>
              {/jv:if}
              <div class="art-body">
                <h2 class="art-title"><a href="{jv:arcurl}">{jv:title}</a></h2>
                <p class="art-excerpt">{jv:description}</p>
                <div class="art-meta">
                  <span class="meta-item"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>{jv:add_time|MyDate='Y-m-d',###}</span>
                  <span class="meta-item"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2"><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>
                </div>
              </div>
            </article>
            {/jv:searchtabrows}
            </div>
            {jv:else /}
            <div class="search-no-result-card">
              <div class="snr-icon">
                <svg viewBox="0 0 24 24" width="56" height="56" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
              </div>
              <h3>{jv:lang name='search_no_result' /}</h3>
              <p>{jv:search_no_result_tip}</p>
              <p class="snr-cat-tip">{jv:lang name='search_tab_empty' /}</p>
            </div>
            {/jv:if}
          </div>
          {/jv:searchtabs}
        </div>
      </div>
      {jv:else /}
      <div class="search-no-result-card">
        <div class="snr-icon">
          <svg viewBox="0 0 24 24" width="64" height="64" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M20 20l-3.5-3.5"/><line x1="8" y1="11" x2="14" y2="11"/></svg>
        </div>
        <h3>{jv:lang name='search_no_result' /}</h3>
        <p>{jv:search_no_result_tip}</p>
        <div class="snr-tags">
          <a href="{jv:url}">{jv:lang name='home' /}</a>
          {jv:search_hot_tags}
          <a href="{jv:url}search.html?q={jv:tag_url}">{jv:tag}</a>
          {/jv:search_hot_tags}
        </div>
      </div>
      {/jv:if}

    </main>

    <aside class="page-aside">
      <div class="side-card">
        <h3 class="side-title">{jv:lang name='hot_search' /}</h3>
        <div class="tag-cloud">
          {jv:search_hot_tags}
          <a href="{jv:url}search.html?q={jv:tag_url}">{jv:tag}</a>
          {/jv:search_hot_tags}
        </div>
      </div>

      <div class="side-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>

<script>
function searchSwitchTab(key){
  document.querySelectorAll('.search-tab').forEach(function(t){t.classList.remove('active');});
  document.querySelectorAll('.search-panel').forEach(function(p){p.style.display='none';});
  var tab=document.querySelector('.search-tab[data-tab="'+key+'"]');
  var panel=document.querySelector('.search-panel[data-tab="'+key+'"]');
  if(tab){tab.classList.add('active');}
  if(panel){panel.style.display='';}
  var sep=location.search.indexOf('?')>=0?'&':'?';
  var q=location.search.replace(/[?&]tab=[^&]*/g,'');
  var prefix=q? q+'&' : '?';
  history.replaceState(null,'',location.pathname+prefix+'tab='+key);
}
if(location.hash){
  var h=location.hash.replace('#','');
  if(document.querySelector('.search-tab[data-tab="'+h+'"]')){
    searchSwitchTab(h);
  }
}
</script>

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