<!DOCTYPE html>
<html>
  <head>
    <title>{{ title }}</title>
    <meta charset="utf-8">
    <meta content="utf-8" http-equiv="encoding">
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="CSS/welcome.css" rel="stylesheet" type="text/css">
    <link href="CSS/chosen.css" rel="stylesheet" type="text/css">
    <link href="CSS/video.css" rel="stylesheet" type="text/css">
    <link href="CSS/ted.css" rel="stylesheet" type="text/css">
    <script src="JS/video.js"></script>
 
    <style type="text/css">
    a:hover {
      color: {{ color }}
    }
    a.nostyle:hover {
      background-color: {{ color }};
    }
    body {
      background: {{ background_color }};
    }
    #video-intro {
      margin:2%;
      text-align: center;
    }
    #video {
      display:inline-block;
    }
    #video-details { 
      display:inline-block;
      vertical-align: top; 
    }
    #video-items{
      /*border: medium solid black;*/
    }
    #grid-container {
      display:block;
      text-align: center;
    }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="header">
        <a href="./index.html" id="top-link"><img id="header-profile" src="CSS/img/header_profile.png"></a>
        <div id="header-line">
		{{ title }}
    {{ options }}
	</div>
      </div>
      <table style="width: 100%;">
        <tr>
          <td>
            <div class="pagination">
              <div class="left-arrow">&#10096;</div>
              <span class="pagination-text"></span>
              <div class="right-arrow">&#10097;</div>
            </div>
          </td>
        </tr>
      </table>
      <div id="grid-container"> 
        <div id="video-intro" class="rig grid">
          <div id="video" >
            <video id="video" class="video-js vjs-default-skin" controls preload="auto" width="480" height="270" data-setup='{"autoplay": true, "preload": "true"}'>
              <source src=""  type="video/webm">
            </video>
          </div>
          <div id="video-details" >
          </div>
        </div>
     <ul id="video-items" class="rig grid"></ul>
    </div>
    <div class="backtotop" onclick="$('html, body').animate({ scrollTop: 0 }, 'slow');">
      <span style="margin: auto;">Back to the top</span>
    </div>
    <div class="pagination" style="margin-bottom: 1em;">
      <div class="left-arrow">&#10096;</div>
      <span class="pagination-text"></span>
      <div class="right-arrow">&#10097;</div>
    </div>
  </div>
  <script src="JS/jquery.js" type="text/javascript"></script>
  <script src="JS/chosen.jquery.js" type="text/javascript"></script>
  <script src="JS/data.js"></script>
  <script src="JS/db.js"></script>
  <script src="JS/app.js"></script>
</body>
</html>
