<!DOCTYPE html>
<html>
  <head>
    <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">
    <title>{{page_title}}</title>
    <link id="favicon" rel="shortcut icon" href="favicon.png" type="image/png">
    <link href="assets/home.css" rel="stylesheet" type="text/css">
    <link href="assets/chosen/chosen.min.css" rel="stylesheet" type="text/css">
    <script src="assets/polyfills.js"></script>
    <script src="assets/webp-hero.bundle.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="assets/img/TED.png" id="title-img"/>
      <select data-placeholder="Language" class="chosen-select" tabindex="2">
        <option value=""></option>
        <option value="lang-all">{{ language_filter_text }}</option>
        {% for language in languages %}
          <option value="{{ language.languageCode }}">{{ language.languageName }}</option>
        {% endfor %}
      </select>
      <hr/>
      <div id="grid-container" style="display:block;">
      <ul id="video-items" class="rig grid"></ul>
    </div>
    <hr/>
    <div class="backtotop">
      <span style="margin: auto;">{{ back_to_top }}</span>
    </div>
    <div id="pagination" style="visibility: hidden; margin-bottom: 1em;">
      <div id="left-arrow">&#10096;</div>
      <span id="pagination-text">{{ pagination_text }}</span>
      <div id="right-arrow">&#10097;</div>
    </div>
  </div>
  <script src="assets/jquery.min.js" type="text/javascript"></script>
  <script src="assets/chosen/chosen.jquery.js" type="text/javascript"></script>
  <script src="assets/data.js"></script>
  <script src="assets/db.js"></script>
  <script src="assets/app.js"></script>
  <script src="assets/webp-trigger.js"></script>
</body>
</html>
