{% extends "base.html" %}

{% block extra_scripts %}
  <script type="text/javascript" src="/scripts/unmute.js"></script>
  <script type="text/javascript" src="/scripts/download_link.js"></script>
  <script type="text/javascript" src="/scripts/detect_audio_track.js"></script>
{% endblock %}

{% block page %}
  <div class="album page">
    {% if title %}
      <div class="title_container">
        <div class="title">{{ title | e }}</div>
      </div>
    {% endif %}
    {% if messages %}
      <div class="message">
        {% for message in messages %}
          <p>{{ message | e }}</p>
        {% endfor %}
      </div>
    {% endif %}
    {% if not videos %}
      <div class="message">
        <p>No videos were specified. To create an album, simply string together videos' shortened urls separated by semi-colons. For example:</p>
        <p class="indent">
          Video 1: <code><span>https://loopvid.appspot.com/</span><strong>pf/abc</strong></code><br />
          Video 2: <code><span>https://loopvid.appspot.com/</span><strong>pf/def</strong></code><br />
          Album: <code><span>https://loopvid.appspot.com/</span><strong>album/pf/abc;pf/def</strong></code>
        </p>
        <p>Note that regular urls are not supported and will not be displayed. You can also set a title by adding <code>?title=My Title</code> at the end. For example:</p>
        <p class="indent">
          <code><span>https://loopvid.appspot.com/</span>album/pf/abc;pf/def<strong>?title=My Title</strong></code>
        </p>
      </div>
    {% else %}
      {% if audio %}
        <div class="post" id="post_audio">
          <audio id="audio" loop="loop" autoplay="autoplay" controls="controls" preload="auto">
            {% for url_dict in audio %}
              <source src="{{ url_dict['url'] | e }}" {% if url_dict['type'] %}type="{{ url_dict['type'] }}"{% endif %}/>
            {% endfor %}
            Your browser does not support the audio tag. Click <a href="{{ audio[0]['url'] | e }}">here</a> to download the audio (you may have to rigth-click and then "save as..."). If the link doesn't work, try changing the file extension from <code>.ogg</code> to <code>.mp3</code>.
          </audio>
        </div>
      {% endif %}
      {% for video in videos %}
        <div class="post" id="post{{ video['number'] }}">
          <div class="video video_frame">
            <video id="video{{ video['number'] }}" autoplay="autoplay" loop="loop" controls="controls" preload="auto" {% if video['number'] != unmute %}muted="muted"{% endif %}>
              {% for url_dict in video['urls'] %}
                <source src="{{ url_dict['url'] | e }}" {% if url_dict['type'] %}type="{{ url_dict['type'] }}"{% endif %}/>
              {% endfor %}
              Your browser does not support the video tag. Click <a href="{{ video['urls'][0]['url'] | e }}">here</a> to download the video. If the link doesn't work, try changing the file extension from <code>.webm</code> to <code>.mp4</code>.
            </video>
          </div>
          <div class="video video_footer">
            <div class="footer_left">
              {# watch link #}
              <div class="watch">
                <a href="{{ video['watch_url'] | e }}" title="watch by itself, with controls">watch</a>
              </div>
              {# unmute link #}
              <div class="unmute">
                <span class="hidden {% if video['number'] != unmute %}fake_link{% else %}fake_link_greyed{% endif %}" id="unmute{{ video['number'] }}">unmute</span>
              </div>
            </div>
            {#- we can't have a space here, or it will mess up the 50%+50% width -#}
            <div class="footer_right">
              {# download link #}
              <div class="download show_child hidden" id="download_div{{ video['number'] }}">
                <a id="download_link{{ video['number'] }}" download>download</a>
                <div class="tooltip tooltip_right hidden" id="download_info{{ video['number'] }}">You might have to right click and select "save link as..."</div>
              </div>
            </div>
            <div class="footer_bottom">
              {# source #}
              <div class="source"></div>
            </div>
          </div>
        </div>
      {% endfor %}
    {% endif %}
  </div>
{% endblock %}
