!!!
html
  head
    meta(charset='utf8')
    meta(content="width=device-width,initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no",name="viewport")
    meta(name='csrf-token', content=typeof(csrfToken)=='undefined'?null:csrfToken)
    meta(name='csrf-param', content='_csrf')
    title lixian
    
    link(href='assets/bootstrap.min.css',rel='stylesheet')
    style.
      body{
        padding-top: 60px;
      }
      footer{
        margin-top: 3em;
      }
      footer img{
        vertical-align: middle;
        margin: -3px 0 0 5px
      }
      .breadcrumb .active a, .breadcrumb :hover a{
        opacity: .5;
      }
      .file-progressbar, .progress{
        transition: opacity ease 1s, width ease 1s;
      }
      .file-progressbar:not(.active){
        opacity: .3;
      }
      .progress.notready{
        opacity: 0;
      }
      .task-files{
        max-height: 60vh;
        overflow-y: auto;
      }
      #stats{
        position: fixed;
        z-index: 2;
        bottom: 0;
        right: 0;
        width: 50%;
        min-width: 20em;
        background-color: rgba(255, 255, 255, 0.8);
        padding: .3em 1em;
        border: solid 1px #999;
        border-style: solid none none solid;
        border-radius: 1em 0 0 0;
      }
      #stats .speed{
        position: absolute;
        bottom: .2em;
        right: .5em;
        font-size: 2.4em;
      }
      @media 
        only screen and (max-width: 760px),
        (min-device-width: 768px) and (max-device-width: 1024px)  {
        *{
          word-wrap: break-word !important;
        }
        table, thead, tbody, th, td, tr{
          display: block;
        }
        thead tr{
          position: absolute;
          top: -9999px;
          left: -9999px;
        }
        td{
          padding-left: 30% !important;
          position: relative;
          display: none;
        }
        td:before{
          position: absolute;
          left: .5em;
          width: 25%;
          white-space: nowrap;
        }
        td.td-file-name{ display: block; }
        td.td-file-name:before{ content: '文件名'; }
        td.td-file-size{ display: block; }
        td.td-file-size:before{ content: '文件大小'; }
        td.td-file-mtime{ display: block; }
        td.td-file-mtime:before{ content: '最后修改'; }
        td.td-file-atime{ display: block; }
        td.td-file-atime:before{ content: '最后访问'; }
        td.td-folder-name{ display: block; }
        td.td-folder-name:before{ content: '目录名'; }
      }
    script(src='assets/jquery.min.js')
    script(src='assets/bootstrap.min.js')
    script(src='assets/async.js')
    script(src='assets/d3.min.js')
    script(src='assets/jquery-ujs.js')
    script(src='script.js')
    script#task_template(type='text/html')
      .panel.panel-default
        .panel-heading(role='tab')
          .pull-right
            .progress(style='float: left; width: 100px; margin: 2px 10px;')
              .progress-bar.progress-bar-success.progress-bar-striped.task-progressbar(style='width: 0%;')
            a.btn-xs.btn.btn-inline.btn-danger.task-delete(data-method='delete') 取消任务
          h4.panel-title
            a.task-toggler(data-toggle='collapse', aria-expanded='true')
              span.task-name
        .panel-collapse.collapse.task-togglee
          .panel-body.task-files
    script#file_template(type='text/html')
      .row
        .col-sm-2
          .progress
            .progress-bar.progress-bar-info.file-progressbar(style='width: 0%;')
              span
        .col-sm-1
          p.file-size
        .col-sm-5
          p.file-name
        .col-sm-4
          p.file-status


  body(data-lixian-portal-version=version)
    #stats
      .pull-right
        .speed
      p 正在进行的任务：
      .executings
    form.modal.fade.vcode-template
      input(type='hidden', name='_csrf', value=typeof(csrfToken)=='undefined'?null:csrfToken)
      .modal-dialog
        .modal-content
          .modal-header
            button.close(type='button', data-dismiss='modal')
              span(aria-hidden='true') ×
              span.sr-only Close
            h4.modal-title 需要输入验证码
          .modal-body
            img
            input(placeholder='请输入验证码', name='vcode')
          .modal-footer
            button.btn.btn-default(type='button', onclick='$(this).closest("form").submit();') 确定
    .navbar.navbar-default.navbar-fixed-top(role='navigation')
      .container
        .navbar-header
          button.navbar-toggle.collapsed(type='button', data-toggle='collapse', data-target='.navbar-collapse')
            span.sr-only 导航
            span.icon-bar
            span.icon-bar
            span.icon-bar
          a.navbar-brand(href='.') lixian-portal
        .collapse.navbar-collapse
          ul.nav.navbar-nav
            li(class=active_tab == 'tasks' ? 'active' : '')
              a(href='.') 任务列表
            li(class=active_tab == 'new_task' ? 'active' : '')
              a(href='new_task') 新建任务
            li(class=active_tab == 'browse' ? 'active' : '')
              a(href='browse') 取回的文件
          unless info.stats.requireLogin
            ul.nav.navbar-nav.navbar-right
              li
                a(href='logout', data-method='post') 登出
    .container
      noscript
        .alert.alert-danger
          |该程序需要您的浏览器支持 JavaScript 方可运行。
      block content
      footer
        a(href='https://github.com/layerssss/lixian-portal', target='_blank') lixian-portal #{version}
        a(href='#',data-toggle="modal", data-target="#myModal")
          img(title='最新版本',src='http://badge.fury.io/js/lixian-portal.svg') 
        #myModal.modal.fade(tabindex='-1', role='dialog', aria-labelledby='myModalLabel', aria-hidden='true')
          .modal-dialog
            .modal-content
              .modal-header
                button.close(type='button', data-dismiss='modal')
                  span(aria-hidden='true') ×
                  span.sr-only Close
                h4#myModalLabel.modal-title 怎样更新
              .modal-body
                ol
                  li 
                    p 使用 npm 进行更新：
                    pre
                      code
                        |npm update lixian-portal -g
                  li 然后重新启动 lixian-portal
              .modal-footer
                a.btn.btn-default(href='https://github.com/layerssss/lixian-portal/commits', target='_blank')
                    |查看更新的内容
                button.btn.btn-primary(type='button', data-dismiss='modal') 我知道了