{% extends 'base.html' %}
{% load core_tags %}
{% block title %}Watch{% endblock %}
{% block content %}
{% navbar 'videos' %}
<h1>Watch</h1>

{% if videos %}
<p>
Please enjoy this {{ videos|length }} video playlist of the bands that performed on the 
<em>Brave New Surf</em> compilation. You can use the button that looks like a widescreen TV
at the bottom of the player to scroll through all the videos.
</p>
<div id="player"></div>

<script>
var tag = document.createElement('script');
tag.src = "http://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

var player;
function onYouTubePlayerAPIReady() {
  player = new YT.Player('player', {
    videoId: '{{ videos|first }}',
    {% if videos|length > 1 %}
    playerVars: { playlist: [
       {% for video in videos|slice:"1:" %}
         {% if not forloop.first %},{% endif %}'{{ video }}'
       {% endfor %} ]},
    {% endif %}
    width: '853',
    height: '480'
  });
}
</script>

{% else %}
   <p>Videos of the bands are coming soon. Please check back later.</p>
{% endif %}
{% endblock %}