{include file="$template_path/html/header.html"}
{include file="$template_path/js/index.html"}
{include file="$template_path/html/jstemplate.html"}
</head>
<body>
<div class="app" id="app">
  {include file="$template_path/html/mobile-nav.html"}
  <!-- content -->
  <div id="content" class="app-content box-shadow-z4" role="main">
    {include file="$template_path/html/pagenav.html"}
    <div class="app-body" id="view">
      <div class="clearfix grey-100 text-center">
        {include file="$template_path/html/banner.html"}
      </div>
      <!-- ############ PAGE START-->
      {foreach from=$htmlmb[1] item=val}
      <div class="clearfix white p-t-md p-b-md p-xs-t p-xs-b pos-rlt" style="z-index: 2">
        <div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-2 col-lg-2 m-t-xs">
              <h3 class="m-t-none m-b-none phone-h2">
                <i class="icon-handbag text-skin md-36"></i>
                {$val.categories.name}
              </h3>
            </div>
            <div class="col-xs-6 col-md-7 col-lg-7 small-nav hidden-sm-down">
              {foreach from=$val.categories_son item=j}
              <a href="/{$languageURL}categories/{$j.id}" target="_blank" class="btn btn-link shadow-skin">
                <i class="m-r-sm"></i>{$j.name}
              </a>
              {/foreach}
            </div>
            <div class="col-xs-6 col-md-3 col-lg-3 text-right">
              <a href="/{$languageURL}upload/form/?category=1" target="_blank" class="btn phonebtn btn-outline rounded b-skin text-skin">
                <i class="i i-file-plus m-r-xs"></i>
                发布模板
              </a>
              <a href="/{$languageURL}categories/1" class="btn phonebtn-icon btn-icon b-2x b-skin skin rounded hover">
                <i class="icon-gengduo hover-rotate"></i>
              </a>
            </div>
          </div>
          <div class="row m-t">
            {if $val.items}
            {foreach from=$val.items item=i}
            <div class="col-xs-6 col-sm-6 col-md-4">
              <section class="box mb-col b-a pos-rlt image">
                <div class="browser clearfix">
                  <span class="col-xs-3 col-sm-3">
                    <i class="yuan"></i>
                  </span>
                  <span class="col-xs-6 col-sm-6">
                    <em>
                    </em>
                  </span>
                  <span class="col-xs-3 col-sm-3 three">
                    <i class="icon-cross2"></i>
                    <i class="icon-check_box_outline_blank"></i>
                    <i class="icon-minus3"></i>
                  </span>
                </div>
                <div class="box-body pic">
                  <div class="img-container fx-img-rotate-l fx-opt-zoom-out">
                    <img data-original="{$data_server}uploads/items/{$i.id}/{$i.thumbnail}" src="/mbthemes/assets/images/load.png" alt="{$i.name|escape}" class="img-responsive">
                    <div class="img-options opw">
                      <div class="img-options-content">
                        {if $i.demo_url}
                        <a data-toggle="ajaxModal" data-src="/{$languageURL}items/itempreview/{$i.id}" href="/{$languageURL}items/preview/{$i.id}" class="btn btn-lg skin m-r-md hidden-xs-down" title="在线演示">
                          <i class="icon-eye"></i>
                        </a>
                        {else}
                        {/if}
                        <a href="/{$languageURL}items/{$i.id}" target="_blank" class="btn btn-lg danger" title="查看详情">
                          <i class="icon-magnifier-add"></i>
                        </a>
                      </div>
                    </div>
                    <span class="sale" title="销量">
                      <i class="icon-handbag m-r-xs"></i> {$i.sales|escape}
                    </span>
                  </div>
                </div>
                <a class="ribbon ribbon-skin">{foreach from=$i.categories item=e}
                  {foreach from=$e item=c name=foo}
                  {if $smarty.foreach.foo.last}{$categories[$c].name}{/if}
                  {/foreach}
                  {/foreach}</a>
                <div class="mb-footer">
                  <!--<div class="text-muted m-b-xs">
                    <a href="/{$languageURL}items/{$i.id}" target="_blank" class="m-r"><i class="icon-clock m-r-xs"></i> {$i.datetime|date_format:"%m-%d"|escape}</a>
                    <a href="/{$languageURL}items/{$i.id}" target="_blank" class="m-r"><i class="icon-bubbles m-r-xs"></i> {$i.comments|escape}</a>
                    <a href="/{$languageURL}items/{$i.id}" target="_blank"><i class="icon-handbag m-r-xs"></i> {$i.sales|escape}</a>
                  </div>-->
                  <div class="h-2xx"><a href="/{$languageURL}items/{$i.id}" target="_blank" class="h5">{$i.name|escape}</a></div>
                  <div class="clearfix m-t-xs">
                    <div class="pull-left m-r-sm dropdown myDrop">
                      <a data-toggle="ajaxUser" data-src="/{$languageURL}user/portfolio/{$users[$i.user_id].username}" href="/{$languageURL}user/{$users[$i.user_id].username}" class="pull-left myUserAjax">
                        <span class="w-32 avatar">
                          {if $users[$i.user_id].avatar != ''}
                          <img src="{$data_server}uploads/users/{$i.user_id}/A_{$users[$i.user_id].avatar}" />
                          {else}
                          <span class="circle skin _100 w-32 fs-80">
                            NP
                          </span>
                          {/if}
                        </span>
                      </a>
                    </div>
                    <a href="/{$languageURL}user/{$users[$i.user_id].username}" target="_blank" class="pull-left m-t-sm clear">
                      {$users[$i.user_id].nickname}
                    </a>
                    <div class="pull-right">
                      <div class="h-32"><span class="price-rmb text-skin"><small>￥</small>{if $i.free_file == 'true'}0{else}{$i.price}{/if}</span></div>
                    </div>
                  </div>
                </div>
              </section>
            </div>
            {/foreach}
            {/if}
          </div>
        </div>
      </div>
      {/foreach}

      <div class="clearfix grey-100 p-t-lg p-b-md p-xs-t p-xs-b pos-rlt" style="z-index: 1">
        <div class="container">
          <div class="row">
            <div class="col-xs-6 col-md-3 col-lg-3">
              <h3 class="m-t-xs m-b-none phone-h2">
                <i class="icon-eyeglasses text-skin md-36"></i>
                最新上传
              </h3>
            </div>
            <div class="col-xs-6 col-md-6 col-lg-6 hidden-sm-down">
              <ul class="nav nav-tabs btn-group z0">
                <li class="nav-item">
                  <a class="btn tabsbtn active phonebtn p-x-md p-xs-x b-t-r-r b-b-r-r" href data-toggle="tab" data-target="#news">最新</a>
                </li>
                <li class="nav-item m-l-0">
                  <a class="btn tabsbtn phonebtn p-x-md p-xs-x text-skin no-radius" style="margin-left:-1px;" data-toggle="tab" data-target="#sales">销量</a>
                </li>
                <li class="nav-item m-l-0">
                  <a class="btn tabsbtn phonebtn p-x-md p-xs-x text-skin b-t-l-r b-b-l-r" style="margin-left:-1px;" data-toggle="tab" data-target="#frees">免费</a>
                </li>
              </ul>
            </div>
            <div class="col-xs-6 col-md-3 col-lg-3 text-right">
              <a href="/{$languageURL}upload/form/?category=17" target="_blank" class="btn phonebtn btn-outline rounded b-skin text-skin">
                <i class="i i-file-plus m-r-xs"></i>
                发布作品
              </a>
              <a href="/{$languageURL}categories/all/" class="btn phonebtn-icon btn-icon b-2x b-skin skin rounded hover" title="更多作品">
                <i class="icon-gengduo hover-rotate"></i>
              </a>
            </div>
          </div>


          <div class="tab-content">
            <div class="tab-pane animated fadeIn active" id="news">
              {if $recentItems}
              <div class="row text-skin-hover m-t">
                {foreach from=$recentItems item=i}
                <div class="col-xs-6 col-sm-6 col-md-3">
                  <div class="box mb-co-b b-a">
                    <div class="item dark">
                      <div class="img-container fx-img-rotate-l fx-opt-zoom-out">
                        <img data-original="{$data_server}uploads/items/{$i.id}/{$i.thumbnail}" src="/mbthemes/assets/images/load.png" alt="{$i.name|escape}" class="img-responsive">
                        <div class="img-options">
                          <div class="img-options-content">
                            {if $i.demo_url}
                            <a data-toggle="ajaxModal" data-src="/{$languageURL}items/itempreview/{$i.id}" href="/{$languageURL}items/preview/{$i.id}" class="btn skin m-r-md hidden-xs-down" title="在线演示">
                              <i class="icon-eye"></i>
                            </a>
                            {else}
                            {/if}
                            <a href="/{$languageURL}items/{$i.id}" target="_blank" class="btn danger text-white" title="查看详情">
                              <i class="icon-magnifier-add"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <a href="/{$languageURL}items/{$i.id}" target="_blank" class="md-btn md-raised md-fab md-mini m-r pos-rlt md-fab-offset pull-right white"><i class="icon-plus2 md-24"></i></a>
                    <div class="p-a">
                      <div class="text-muted">
                        <a href="/{$languageURL}items/{$i.id}" target="_blank" title="更新日期" class="hidden-xs-down m-r"><i class="icon-clock m-r-xs"></i> {$i.datetime|date_format:"%m-%d"|escape}</a>
                        <a href="/{$languageURL}items/{$i.id}#comment" target="_blank" title="评论" class="m-r"><i class="icon-bubbles m-r-xs"></i> {$i.comments|escape}</a>
                        <a href="/{$languageURL}items/{$i.id}" target="_blank" title="销量"><i class="icon-handbag m-r-xs"></i> {$i.sales|escape}</a>
                      </div>
                      <div class="h-2xx"><a href="/{$languageURL}items/{$i.id}" class="h6">{$i.name|escape}</a></div>
                      <div class="clearfix m-t-xs">
                        <div class="pull-left m-r-sm dropdown myDrop">
                          <a data-toggle="ajaxUser" data-src="/{$languageURL}user/portfolio/{$users[$i.user_id].username}" href="/{$languageURL}user/{$users[$i.user_id].username}" class="pull-left myUserAjax">
                            <span class="w-32 avatar">
                              {if $users[$i.user_id].avatar != ''}
                              <img src="{$data_server}uploads/users/{$i.user_id}/A_{$users[$i.user_id].avatar}" />
                              {else}
                              <span class="circle skin _100 w-32 fs-80">
                                NP
                              </span>
                              {/if}
                            </span>
                          </a>
                        </div>
                        <a href="/{$languageURL}user/{$users[$i.user_id].username}" target="_blank" class="username pull-left m-t-sm clear">
                          {$users[$i.user_id].nickname}
                        </a>
                        <div class="pull-right">
                          <div class="h-32"><a href="/{$languageURL}items/{$i.id}" target="_blank" class="price">￥<span class="text-lg"> {if $i.free_file == 'true'}0{else}{$i.price}{/if}</span></a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/foreach}
              </div>
              {/if}
            </div>
            <div class="tab-pane animated fadeIn" id="sales">
              {if $hotItems}
              <div class="row text-skin-hover m-t">
                {foreach from=$hotItems item=i}
                <div class="col-xs-6 col-sm-6 col-md-3">
                  <div class="box mb-co-b b-a">
                    <div class="item dark">
                      <div class="img-container fx-img-rotate-l fx-opt-zoom-out">
                        <img data-original="{$data_server}uploads/items/{$i.id}/{$i.thumbnail}" src="/mbthemes/assets/images/load.png" alt="{$i.name|escape}" class="img-responsive">
                        <div class="img-options">
                          <div class="img-options-content">
                            {if $i.demo_url}
                            <a data-toggle="ajaxModal" data-src="/{$languageURL}items/itempreview/{$i.id}" href="/{$languageURL}items/preview/{$i.id}" class="btn skin m-r-md hidden-xs-down" title="在线演示">
                              <i class="icon-eye"></i>
                            </a>
                            {else}
                            <a data-toggle="MobanBoxAjax" href="/{$languageURL}items/screenshots/{$i.id}" title="截图预览" class="btn skin m-r-md hidden-xs-down">
                              <i class="icon-eye"></i>
                            </a>
                            {/if}
                            <a href="/{$languageURL}items/{$i.id}" target="_blank" class="btn danger text-white" title="查看详情">
                              <i class="icon-magnifier-add"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <a href="/{$languageURL}items/{$i.id}" target="_blank" class="md-btn md-raised md-fab md-mini m-r pos-rlt md-fab-offset pull-right white"><i class="icon-plus2 md-24"></i></a>
                    <div class="p-a">
                      <div class="text-muted">
                        <a href="/{$languageURL}items/{$i.id}" target="_blank" title="更新日期" class="hidden-xs-down m-r"><i class="icon-clock m-r-xs"></i> {$i.datetime|date_format:"%m-%d"|escape}</a>
                        <a href="/{$languageURL}items/{$i.id}#comment" target="_blank" title="评论" class="m-r"><i class="icon-bubbles m-r-xs"></i> {$i.comments|escape}</a>
                        <a href="/{$languageURL}items/{$i.id}" target="_blank" title="销量"><i class="icon-handbag m-r-xs"></i> {$i.sales|escape}</a>
                      </div>
                      <div class="h-2xx"><a href="/{$languageURL}items/{$i.id}" target="_blank" class="h6">{$i.name|escape}</a></div>
                      <div class="clearfix m-t-xs">
                        <div class="pull-left m-r-sm dropdown myDrop">
                          <a data-toggle="ajaxUser" data-src="/{$languageURL}user/portfolio/{$users[$i.user_id].username}" href="/{$languageURL}user/{$users[$i.user_id].username}" class="pull-left myUserAjax">
                            <span class="w-32 avatar">
                              {if $users[$i.user_id].avatar != ''}
                              <img src="{$data_server}uploads/users/{$i.user_id}/A_{$users[$i.user_id].avatar}" />
                              {else}
                              <span class="circle skin _100 w-32 fs-80">
                                NP
                              </span>
                              {/if}
                            </span>
                          </a>
                        </div>
                        <a href="/{$languageURL}user/{$users[$i.user_id].username}" target="_blank" class="username pull-left m-t-sm clear">
                          {$users[$i.user_id].nickname}
                        </a>
                        <div class="pull-right">
                          <div class="h-32"><a href="/{$languageURL}items/{$i.id}" target="_blank" class="price">￥<span class="text-lg"> {if $i.free_file == 'true'}0{else}{$i.price}{/if}</span></a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/foreach}
              </div>
              {/if}
            </div>
            <div class="tab-pane" id="frees">
              <div class="row text-skin-hover m-t">
                {if $freeItem}
                {foreach from=$freeItem item=fi}
                <div class="col-xs-6 col-sm-6 col-md-3">
                  <div class="box mb-co-b b-a">
                    <div class="item dark">
                      <div class="img-container fx-img-rotate-l fx-opt-zoom-out">
                        <img data-original="{$data_server}uploads/items/{$fi.id}/{$fi.thumbnail}" src="/mbthemes/assets/images/load.png" alt="{$fi.name|escape}" class="img-responsive">
                        <div class="img-options">
                          <div class="img-options-content">
                            {if $fi.demo_url}
                            <a data-toggle="ajaxModal" data-src="/{$languageURL}items/itempreview/{$fi.id}" href="/{$languageURL}items/preview/{$fi.id}" class="btn skin m-r-md hidden-xs-down" title="在线演示">
                              <i class="icon-eye"></i>
                            </a>
                            {else}
                            <a data-toggle="MobanBoxAjax" href="/{$languageURL}items/screenshots/{$fi.id}" title="截图预览" class="btn skin m-r-md hidden-xs-down">
                              <i class="icon-eye"></i>
                            </a>
                            {/if}
                            <a href="/{$languageURL}items/{$fi.id}" target="_blank" class="btn danger text-white" title="查看详情">
                              <i class="icon-magnifier-add"></i>
                            </a>
                          </div>
                        </div>
                      </div>
                    </div>
                    <a href="/{$languageURL}items/{$fi.id}" target="_blank" class="md-btn md-raised md-fab md-mini m-r pos-rlt md-fab-offset pull-right white"><i class="icon-plus2 md-24"></i></a>
                    <div class="p-a">
                      <div class="text-muted">
                        <a href="/{$languageURL}items/{$fi.id}" target="_blank" title="更新日期" class="hidden-xs-down m-r"><i class="icon-clock m-r-xs"></i> {$fi.datetime|date_format:"%m-%d"|escape}</a>
                        <a href="/{$languageURL}items/{$fi.id}#comment" target="_blank" title="评论" class="m-r"><i class="icon-bubbles m-r-xs"></i> {$fi.comments|escape}</a>
                        <a href="/{$languageURL}items/{$fi.id}" target="_blank" title="销量"><i class="icon-handbag m-r-xs"></i> {$fi.sales|escape}</a>
                      </div>
                      <div class="h-2xx"><a href="/{$languageURL}items/{$fi.id}" target="_blank" class="h6">{$fi.name|escape}</a></div>
                      <div class="clearfix m-t-xs">
                        <div class="pull-left m-r-sm dropdown myDrop">
                          <a data-toggle="ajaxUser" data-src="/{$languageURL}user/portfolio/{$users[$fi.user_id].username}" href="/{$languageURL}user/{$users[$fi.user_id].username}" class="pull-left myUserAjax">
                            <span class="w-32 avatar">
                              {if $users[$fi.user_id].avatar != ''}
                              <img src="{$data_server}uploads/users/{$fi.user_id}/A_{$users[$fi.user_id].avatar}" />
                              {else}
                              <span class="circle skin _100 w-32 fs-80">
                                NP
                              </span>
                              {/if}
                            </span>
                          </a>
                        </div>
                        <a href="/{$languageURL}user/{$users[$fi.user_id].username}" class="username pull-left m-t-sm clear">
                          {$users[$fi.user_id].nickname}
                        </a>
                        <div class="pull-right">
                          <div class="h-32"><a href="/{$languageURL}items/{$fi.id}" target="_blank" class="price">￥<span class="text-lg"> {if $fi.free_file == 'true'}0{else}{$fi.price}{/if}</span></a></div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                {/foreach}
                {/if}
              </div>
            </div>
          </div>


        </div>
      </div>



      {if $newAuthor}
      <div class="clearfix white p-t-lg p-b-md p-xs-t p-xs-b pos-rlt" style="z-index: 0">
        <div class="container">
          <div class="row">
            <div class="col-xs-6 col-sm-6 col-md-3">
              <h3 class="m-t-none m-b-none phone-h2">
                <i class="icon-user-following text-skin md-36"></i>
                设计师
              </h3>
            </div>
            <div class="col-md-6 small-nav hidden-sm-down">
              <a href="/{$languageURL}users/top/" class="btn btn-link shadow-skin active">
                <i class="m-r-xs"></i>
                推荐
              </a>
              <a href="/{$languageURL}users/top/" class="btn btn-link shadow-skin">
                <i class="m-r-xs"></i>
                最热
              </a>
              <a href="/{$languageURL}users/top/" class="btn btn-link shadow-skin">
                <i class="m-r-xs"></i>
                最新
              </a>
            </div>
            <div class="col-xs-6 col-sm-6 col-md-3 text-right">
              <a href="/{$languageURL}make_money/become_an_author" class="btn phonebtn btn-outline rounded b-skin text-skin">
                <i class="i i-file-plus m-r-xs"></i>
                成为作者
              </a>
              <a href="/{$languageURL}users/top/" class="btn phonebtn-icon btn-icon b-2x b-skin skin rounded hover">
                <i class="icon-gengduo hover-rotate"></i>
              </a>
            </div>
          </div>
          <div class="row row-sm m-t-md ng-scope">
            {foreach from=$newAuthor item=j}
            <div class="col-xs-6 col-lg-3">
              <div class="list-item box user-items b-a au-no-s r m-b">
                {if $j.featured_author  == 'true'}
                <span class="label rounded skin pos-abt text-xs m-r-xs" style="top: -.75rem; right: 10%">
                  <b class="arrow bottom b-skin pull-in"></b>
                  推荐
                </span>
                {elseif $j.elite_author  == 'true' || $j.power_elite_author  == 'true'}
                <span class="label rounded danger pos-abt text-xs m-r-xs" style="top: -.75rem; right: 10%">
                  <b class="arrow bottom b-danger pull-in"></b>
                  精英
                </span>
                {else}
                {/if}

                <a href="/{$languageURL}user/{$j.username}" target="_blank" title="{$j.nickname}" class="list-left">
                  <span class="w-64 avatar">
                    {if $j.avatar != ''}
                    <img alt="{$j.nickname}" src="{$data_server}uploads/users/{$j.user_id}/A_{$j.avatar}" />
                    {else}
                    <span class="w-64 text-md circle skin avatar _100">
                      NP
                    </span>
                    {/if}
                    <i class="on b-white bottom"></i>
                  </span>
                </a>
                <div class="list-body">
                  <div class="text-ellipsis text-lg">
                    <a href="/{$languageURL}user/{$j.username}" target="_blank">{$j.nickname}</a>
                  </div>
                  {if $j.featured_author  == 'true'}
                  <small class="text-muted text-ellipsis">推荐作者</small>
                  {elseif $j.elite_author  == 'true' || $j.power_elite_author  == 'true'}
                  <small class="text-muted text-ellipsis">精英作者</small>
                  {else}
                  <small class="text-muted text-ellipsis">普通作者</small>
                  {/if}
                </div>
              </div>
            </div>
            {/foreach}

          </div>
        </div>
      </div>
      {/if}
    </div>
    <!-- ############ PAGE END-->
    {include file="$template_path/html/footer.html"}
  </div>
  {include file="$template_path/html/backtop.html"}
  {include file="$template_path/html/mb-settings.html"}
  <!-- ############ LAYOUT END-->
</div>
<script type="text/javascript">
  {literal}
  $(function() {
    if ($.support.pjax) {
      $.pjax.defaults.maxCacheLength = 0;
      var container = $('#view');
      $(document).on('click', '#pagination li a,.small-nav a,a[data-pjax], [data-pjax] a, a.navbar-brand', function(event) {
        $.pjax.click(event, {
          container: container,
          timeout: 6000,
          fragment: '#view',
          show: 'fade',
          cache: false,
          storage: true,
          scrollTo: false
        });
      });

      $(document).on('submit','form#search,button.searchbtn',function(event) {
        $.pjax.submit(event,{
          container: container,
          timeout: 6000,
          fragment: '#view',
          show: 'fade',
          cache: false,
          storage: true,
          scrollTo: false
        });
      });

      $(document).on('pjax:start', function() {
        $( document ).trigger( "pjaxStart" );
      });
      // fix js
      $(document).on('pjax:end', function(event) {
        $( document ).trigger( "pjaxEnd" );
        $("img.img-responsive").lazyload({
          effect : "fadeIn",
          threshold : 200
        });
      });
    }
  });
  {/literal}
</script>

<script type="text/javascript">
  {literal}
  $(function() {
    $("img.img-responsive").lazyload({
      effect : "fadeIn",
      threshold : 200
    });
  });
  {/literal}
</script>
</body>
</html>