<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  <title>Tailon</title>
  <meta name='description' content='Log Viewer'>
  <meta name='viewport' content='width=device-width'>
  <!-- <link rel="shortcut icon" href="favicon.ico?v=2" /> -->

  <link rel='stylesheet' href='{{root}}assets/css/normalize.min.css'>
  <link rel='stylesheet' href='{{root}}assets/js/vendor/select2.css'>
  <link rel='stylesheet' href='{{root}}assets/css/main.css' title='main'>
  <link rel='stylesheet' href='{{root}}assets/fonts/font-awesome.css'>

  <!--[if lt IE 9]>
  <script src='//html5shiv.googlecode.com/svn/trunk/html5.js'></script>
  <script>window.html5 || document.write('<script src="{{root}}assets/js/vendor/html5shiv.js"><\/script>')</script>
  <![endif]-->
</head>
<body>
  <div class='quickbar'>
    <div class='button-group hidden'>
      <a class='action-show-toolbar' href='#' title='Show Toolbar'><i class='icon-chevron-sign-down'></i></a>
    </div>
  </div>
  
  <div class='toolbar'>
    <div class='toolbar-item'>
      <select id='logselect' tabindex='1'>
        <option data-size='1' data-mtime='1' value=''></option>
      {% for f in files %}
        <option data-size="{{f[1]}}" data-mtime="{{f[2]}}" value="{{f[0]}}">{{f[0]}}</option>
      {% end %}
      </select>
    </div>

    <div class='toolbar-item'>
      <select id='modeselect' tabindex='2'>
        <option value='tail'>Tail</option>
        <option value='grep'>Grep</option>
        <option value='awk'>Awk</option>
      </select>
    </div>

    <div class='toolbar-item toolbar-item-fill'>
      <div id='scriptinput' tabindex='3'>
        <input type='text' name='script' placeholder='script' disabled>
        <div><i class='icon-code'></i></div>
      </div>
    </div>

    <div class='toolbar-item' tabindex='4'>
      <div class='button-group' style='padding-right:5px;'>
        <a class='action-download' href='#'><i class='icon-download' title='Download File'></i></a>
        <a class='action-configure' href='#'><i class='icon-wrench' title='Configure'></i></a>
        <a class='action-clear-logview' href='#' title='Clear Logview'><i class='icon-eraser'></i></a>
        <a class='action-hide-toolbar' href='#' title='Hide Toolbar'><i class='icon-chevron-sign-up'></i></a>
      </div>
    </div>
  </div>

  <div class='scrollable'>
    <div id='logviewer' class='log-view'></div>
  </div>

  <script>
    var config = {{client_config}};
    var relativeRoot = '{{root}}';
  </script>

  <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js'></script>
  <script>window.jQuery || document.write('<script src="{{root}}assets/js/vendor/jquery-2.0.1.min.js"><\/script>')</script>
  <script src='{{root}}assets/js/vendor/cookie.min.js'></script>
  <script src='{{root}}assets/js/vendor/jwerty.js'></script>
  <script src='{{root}}assets/js/vendor/moment.min.js'></script>
  <script src='{{root}}assets/js/vendor/select2.min.js'></script>
  <script src='{{root}}assets/js/main.js'></script>
</body>
</html>
