{% extends 'base.html' %}
{% from 'utils.html' import index, root with context %}
{% block head %}
<link rel="stylesheet" type="text/css" href="{{ root() }}/static/viewer.css">
<script>
  const WORK_ID = "{{ work['id'] }}";
  const INDEX = "{{ index() }}";
  const IMAGES = [
      {% for filename in images %}
      "{{ root() }}/images/{{ work['id'] }}/{{ filename }}",
      {% endfor %}
  ];
</script>
<script src="{{ root() }}/static/viewer.js"></script>
{% endblock %}
{% block body %}
<div id="progress"></div>
<div id="page-num">
  <table>
    <tr><td id="current-page"></td></tr>
    <tr><td id="total-pages">{{ images | length }}</td></tr>
  </table>
</div>
<div id="duration"></div>
<div id="controls">
  <div id="tap-left" class="tap">
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
      <path d='M 60 -60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
    </svg>
  </div>
  <div id="tap-right" class="tap">
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='80' height='140' viewBox='-10 -70 80 140'>
      <path d='M 0 -60 L 60 0 L 0 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
    </svg>
  </div>
  <div id="tap-back" class="tap">
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='80' viewBox='-70 -10 140 80'>
      <path d='M -60 60 L 0 0 L 60 60' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
    </svg>
  </div>
  <div id="tap-restart" class="tap">
    <svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='140' height='140' viewBox='-70 -70 140 140'>
      <path d='M 54.16 9.55 A 55 55 0 1 1 54.16 -9.55' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
      <path d='M 54.16 -9.55 l 9.39 -17.66' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
      <path d='M 54.16 -9.55 l -17.66 -9.39' fill='none' stroke='#ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' stroke-width='10'/>
    </svg>
  </div>
</div>
<div class="image-container" id="current-image"></div>
<div class="image-container" id="preload-images"></div>
{% endblock %}