<!DOCTYPE html>
<html>
<head>
  <title> {{ text.title }} </title>
  <link rel="stylesheet" type="text/css" href="/static/css/text.css" />
  <link rel="stylesheet" type="text/css" href="/static/css/jquery.tooltip.css" />
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/padma/jquery.tooltip.js"></script>
  <script type="text/javascript" src="/static/js/padma/padma.layers.js"></script>
  <script type="text/javascript" src="/static/js/padma/padma.links.js"></script>
  <script type="text/javascript" src="/static/js/text.js"></script>  
  <script type="text/javascript" src="/static/js/padma/utils.js"></script>
</head>
<body>
<script type="text/html" id="tmpl_tcRange">
<div class="padmaWrapper">
<!--  <img src="<%= video.getFrame(linkData.tcIn) %>" /> -->
  <video width="400" src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" controls="controls" autoplay="autoplay"></video>
<!--  <img src="<%= video.getFrame(linkData.tcOut) %>" /> -->
  <div class="annotation">
    Transcripts / annotations will appear here.
  </div>
  <div class="closeButton">x</div>
</div>
</script>

<script type="text/html" id="tmpl_layers">
  <div class="layersWrapper">
    <% for (var i=0; i<layers.length; i++) { var layer = layers[i]; %>
    <div class="layerWrapper">
      <div class="layerTrack"><%= layer.track %></div>
      <div class="layerText"><%= layer.value_html %></div>
    </div>
    <% } %>
  </div>

</script>

<script type="text/html" id="tmpl_tooltip">
  <div class="padmaTooltip">
    <div class="videoInfo">
      Click link to play
    </div>
    <img src="<%= thumbUrl %>" />
    <h4 class="padmaTitle">
      <%= video.video.title %>
    </h4>
  </div>
</script>

<script type="text/html" id="tmpl_sidebar">
  <div class="padmaViewer">
    <div class="padmaButtons">
      <span class="viewOnPadma">
        <a title="Click to view clip on Pad.ma" target="_blank" href="<%= linkData.url %>">&hearts;</a>
      </span>
      <span class="videoInfo">
        <a title="Click to get more info about video" target="_blank" href="<%= video.infoUrl %>">&#161;</a>
      </span>
      <span class="downloadVideo">
        <a title="Right-click and Save Link As to download video" target="_blank" href="<%= linkData.url %>">&darr;</a>
      </span>
      <span class="aboutThis">
        <a title="What is this?" target="_blank" href="about.html">&agrave;</a>
      </span>
      <span class="padmaHelp">
        <a title="Help!" target="_blank" href="help.html">&iquest;</a>
      </span>
      <span class="padmaCopyright">
        <a title="Copyright notice" target="_blank" href="copyright.html">&copy;</a>
      </span>
    </div>
    <video src="<%= video.getLayerVideo(linkData.tcIn, linkData.tcOut) %>" width="320" poster="<%= video.getFrame(linkData.tcIn) %>" controls="controls" autoplay="autoplay"></video>

    <div class="annotationWrapper">
  
      <div class="trackButtons" data-selected="transcript">
        <span class="trackButton" data-track="transcript">Transcript</span>
      </div>
 
      <div class="annotationText">

      </div>

    </div>
  </div>
</script>
{% autoescape off %}
<div id="loading"></div>
<div id="wrapper">
  <h1>
    {{ text.title }}
  </h1>
  <div id="padmaSidebar">
    <div id="padmaSidebarWrapper"></div>
    <div id="aboutTxt">
      <h3>Author: </h3>
      <span class="author_name">{{ text.author }}</span>
      <div class="author_bio">{{ text.author_bio }}</div>
      <div class="abstract">
        <h4>Abstract: </h4>
        <span class="abstract_text">{{ text.abstract }}</span>
      </div>
    </div>
  </div>

  <div id="essay">
    {{ text.html }}
  </div>
</div>
{% endautoescape %}
</body>
</html>