<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <title>{if isset($title)}{$title} | {/if}{$domain}</title>
  <meta charset="utf-8" />
  <meta name="keywords" content="{if isset($meta_keywords)}{$meta_keywords}{else}{$lang.page_keywords}{/if}" />
  <meta name="description" content="{if isset($meta_description)}{$meta_description}{else}{$lang.page_title}{/if}" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="/mbthemes/css/bootstrap.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/icon.css" type="text/css" />
  <link rel="stylesheet" href="/mbthemes/css/mb.css" type="text/css" />
  <link rel="Shortcut icon" href="{$data_server}favicon.ico" />
  <script type="text/javascript" src="{$template_data}scripts/sea.js"></script>
  <script type="text/javascript">
    {literal}
    seajs.config({
      alias: {
        "jq": "lib/jquery/1.11.2/jq",
        "mz": "lib/modernizr/2.8.3/modernizr",
        "ajaxup": "plug/ajaxupload/swfupload",
        "ajaxupque": "plug/ajaxupload/swfupload.queue",
        "ajaxupfile": "plug/ajaxupload/fileprogress",
        "ajaxuphand": "plug/ajaxupload/handlers",
        "hchart": "plug/highcharts/highcharts",
        "mobanboxmedia": "plug/mobanboxmedia/jquery.mobanboxmedia"
      }
    });
    {/literal}
  </script>
  <script src="/mbthemes/js/jquery.min.js"></script>
  <!-- Bootstrap -->
  <script src="/mbthemes/js/bootstrap.js"></script>
  <!--[if lt IE 9]>
  <script src="/mbthemes/js/ie/html5shiv.js"></script>
  <script src="/mbthemes/js/ie/respond.min.js"></script>
  <script src="/mbthemes/js/ie/excanvas.js"></script>
  <![endif]-->
{literal}
<style>
  html {
    height: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  body {
    height: 100%;
  }
  .bg-cover,.single-photo__image {
    background-size: cover;
    background-position: center center
  }

  .full-width,.single-photo,.single-photo__image {
    height: 100%;
    width: 100%
  }


  .sheet--overlay {
    background-color: transparent;
    color: #ffffff;
    text-shadow: 0px 1px 1px rgba(0,0,0,0.5)
  }

  .sheet--overlay .text-primary {
    color: #ffffff
  }

  .sheet--overlay .text-secondary {
    color: #e6e6e6;
    opacity: 0.8
  }

  .sheet--overlay a {
    color: #ffffff;
    opacity: 0.6
  }

  .sheet--overlay a:hover {
    color: #ffffff;
    opacity: 1
  }
  .single-photo {
    overflow: hidden;
    position: relative;
    min-height: 460px
  }

  .single-photo--portrait {
    overflow-y: scroll
  }

  .single-photo__fake-image {
    position: absolute;
    top: 0;
    z-index: 10;
    opacity: 0;
    height: 100%;
    width: 100%
  }

  .single-photo__gradient-overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 8;
    background: transparent;
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.7) 100%)
  }

  .single-photo__overlay {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index: 8;
    opacity: 0
  }

  .single-photo__left-column,.single-photo__right-column,.single-photo__footer,.single-photo__overlay,.single-photo__close-button-container,.single-stats,.single-info {
    -webkit-transition: opacity 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out, visibility 0.5s linear;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out, visibility 0.5s linear
  }

  .single-photo--show-stats .single-photo__close-button-container,.single-photo--show-info .single-photo__close-button-container {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible
  }

  .single-photo--show-stats .single-photo__overlay {
    opacity: 1;
    visibility: visible
  }

  .single-photo--show-stats .single-photo__left-column,.single-photo--show-stats .single-photo__right-column {
    -webkit-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
    opacity: 0;
    visibility: hidden
  }

  .single-photo--show-stats .single-photo__footer {
    -webkit-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px);
    opacity: 0;
    visibility: hidden
  }

  .single-photo--show-stats .single-stats {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible
  }

  .single-photo--show-info .single-photo__overlay {
    opacity: 1;
    visibility: visible
  }

  .single-photo--show-info .single-photo__left-column,.single-photo--show-info .single-photo__right-column {
    -webkit-transform: translateY(-80px);
    -ms-transform: translateY(-80px);
    transform: translateY(-80px);
    opacity: 0;
    visibility: hidden
  }

  .single-photo--show-info .single-photo__footer {
    -webkit-transform: translateY(80px);
    -ms-transform: translateY(80px);
    transform: translateY(80px);
    opacity: 0;
    visibility: hidden
  }

  .single-photo--show-info .single-info {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible
  }

  .single-photo__left-column {
    width: 40%;
    float: left;
    text-align: left
  }

  .single-photo__center-column {
    width: 20%;
    float: left;
    text-align: center
  }

  .single-photo__right-column {
    width: 40%;
    float: left;
    text-align: right
  }

  .single-photo__header {
    position: fixed;
    width: 100%;
    top: 18px;
    padding: 0 18px;
    z-index: 20
  }

  .single-photo__footer {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 0 18px;
    z-index: 20
  }

  .single-photo__footer a {
    margin-top: -6px;
    padding: 6px 9px
  }

  .single-photo__footer-left {
    float: left;
    text-align: left;
    width: 70%
  }

  .single-photo__footer-right {
    float: right;
    text-align: right;
    width: 30%
  }

  .single-photo__location {
    margin: 18px 0;
    font-size: 14px
  }

  .single-photo__vertical-divider {
    height: 32px;
    width: 2px;
    padding: 0 !important;
    opacity: 0.2;
    background-color: #ffffff;
    margin-bottom: -12px
  }

  a .single-photo__user {
    opacity: 0.6;
    -webkit-transition: opacity 0.2s ease-in-out;
    transition: opacity 0.2s ease-in-out
  }

  a:hover .single-photo__user {
    opacity: 1
  }

  .single-photo__avatar {
    height: 35px;
    width: 35px;
    border-radius: 16px;
    background-color: #999999
  }

  .single-photo__user-heading {
    display: block;
    font-size: 15px;
    margin: 0;
    margin-top: 5px;
    line-height: 1;
    letter-spacing: 0
  }

  .single-photo__user-subheading {
    display: block;
    font-size: 11px;
    line-height: 1;
    margin: 1px 0 3px;
    letter-spacing: 0
  }

  .single-stats,.single-info {
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 15;
    -webkit-transform: translateY(100px);
    -ms-transform: translateY(100px);
    transform: translateY(100px);
    opacity: 0;
    visibility: hidden
  }

  .single-stats__container {
    position: relative;
    z-index: 20
  }

  .single-stats__stat {
    text-align: center;
    padding: 6px 12px
  }
  .btn-ghost-black {
    opacity: .5;
    border-radius: 6px;
  }
  .btn-ghost-black:hover,
  .btn-ghost-black:focus,
  .btn-ghost-black:active,
  .btn-ghost-black.active {
    opacity: 1;
   }

</style>
{/literal}
</head>
<body class="">

<div class="sheet sheet--overlay single-photo js-single-photo__container" style="background-color: rgba(127, 129, 129, 0.85);">
  
  <img src="{foreach from=$previewFiles item=file name=foo}{$file}{if !$smarty.foreach.foo.last}|{/if}{/foreach}" class="single-photo__fake-image js-fluid-image">
  <div class="single-photo__gradient-overlay"></div>
  <div class="single-photo__overlay"></div>
  
  <div data-src="{foreach from=$previewFiles item=file name=foo}{$file}{if !$smarty.foreach.foo.last}|{/if}{/foreach}" style="background-image: url({foreach from=$previewFiles item=file name=foo}{$file}{if !$smarty.foreach.foo.last}|{/if}{/foreach});" class="single-photo__image js-fluid-bg-image js-single-photo__image" alt="{$item.name}" data-width="3888" data-height="2592"></div>
  
  <div class="single-photo__header">
    <div class="single-photo__left-column">
      <a href="/{$languageURL}user/{$item.user.username}/" class="link--no-underline" target="_blank" title="{$item.user.nickname}的主页">
        <div class="single-photo__user media block">
          <div class="media__img avatar-container pull-left">
            {if $item.user.avatar != ''}
            <img alt="{$item.user.username}" class="media-object single-photo__avatar avatar avatar--outlined hidden-xs js-fluid-image" src="{$data_server}uploads/users/{$item.user.user_id}/A_{$item.user.avatar}" />
            {else}
            <img alt="{$item.user.username}" class="media-object single-photo__avatar avatar avatar--outlined hidden-xs js-fluid-image" src="{$template_data}img/default-user.jpg" />
            {/if}
          </div>
          
          <div class="media__body clear">
            <h1 class="heading-zeroed m-t-none">
              <span class="single-photo__user-subheading">Photo by</span>
              <span class="single-photo__user-heading text-overflow">{$item.user.nickname}</span>
            </h1>
          </div>
        </div>
      </a>




    </div>
    
    <div class="single-photo__center-column">
      <a href="/index.php/piclist/3" title="返回图片列表页">
        <img src="/mbthemes/images/logo/logo_w.png" class="navbar__logo" alt="">
      </a>
    </div>
    
    <div class="single-photo__right-column">
      {if check_login_bool()}
      <button class="btn btn-ghost-black btn-xs-xs" type="submit" data-toggle="modal" data-target="#cbook">
        <i class="icon-xihuan m-r-xs fs-16 text-danger"></i>收藏
      </button>
      {else}
      <button class="btn btn-ghost-black btn-xs-xs" type="submit" data-toggle="modal" data-target="#myModal">
        <i class="icon-xihuan m-r-xs fs-16 text-danger" style="vertical-align: -3px"></i>收藏
      </button>
      {/if}
      <a class="btn btn-ghost-black btn-xs-xs m-l-sm" target="_blank" href="{foreach from=$previewFiles item=file name=foo}{$file}{if !$smarty.foreach.foo.last}|{/if}{/foreach}">
        <i class="icon-inbox"></i>
        下载
      </a>
    </div>
  </div>
  <div class="single-photo__footer">
    <div class="single-photo__footer-left">
      <h3 class="single-photo__location text-overflow">
        <i class="icon-link2 text-lg"></i> {$item.name}
      </h3>
    </div>
    <div class="single-photo__footer-right">
      <ul class="nav">
        <li>
          <a href="#" class="js-single-photo__show-stats" data-toggle="tooltip" title="Stats">
            <span class="delta icon icon-stats"></span>
            <span class="sr-only">Stats</span>
          </a>
        </li>
      </ul>
    </div>
  </div>



</div>

{if check_login_bool()}

<!-- Modal -->
<div class="modal fade" id="cbook" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">

    <form id="bookmark_form" method="post" action="#bookmark" enctype="multipart/form-data">
      <div class="modal-content">



        <div class="modal-header">
          <div class="clearfix form-group">
            <select class="form-control" id="collection_id" name="collection_id">
              {if $bookCollections}
              {foreach from=$bookCollections item=c}
              <option value="{$c.id}">{$c.name}</option>
              {/foreach}
              {else}
              <option value="none">请先新建书签集</option>
              {/if}
            </select>
          </div>
          <h4 class="modal-title" id="collection_create_link"><a list-show="0" href="#">新建书签集</a></h4>
        </div>
        <div class="modal-body" style="display:none;" id="collection_create_form">



          <div class="form-group">
            <label for="name">书签名称</label>
            <input id="name" class="form-control" name="name" type="text" value="" />
          </div>

          <div class="form-group">
            <label for="description">书签描述</label>
            <textarea id="description" class="form-control" name="description" rows="6"></textarea>
          </div>


          <div class="form-group">
            <label for="file_upload">书签封面</label>
            <input id="file_upload" name="file_upload" class="form-control" type="file">
            <span class="help-block m-b-none">(260 x 140px)</span>
          </div>

          <div class="checkbox i-checks">
            <label for="publically_visible">
              <input id="publically_visible" name="publically_visible" type="checkbox" checked="" value="1"><i></i> 分类是否公开?
            </label>
          </div>
        </div>
        <div class="modal-footer" href="javascript: void(0);">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <input type="hidden" name="add_collection" value="yes" />
          <button type="submit" class="btn btn-info">添加至书签集！</button>
        </div>
      </div>
    </form>
    <script>
      {literal}
      seajs.use(["jq", "modules/collection"], function($, coll){
        coll.btninit("#collection_create_link a", "#collection_create_form");
      });
      {/literal}
    </script>
  </div>
</div>

{/if}

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    {include file="$template_path/items/purchase_panel.html"}
  </div>
</div>

</body>
</html>
