{% extends "site_base.html" %}
{% load thumbnail %}
{% load more %}

{% block js %}
<script type="text/javascript" src="{{ STATIC_URL }}js/flowplayer.min.js"></script>
{% endblock %}

{% block css %}
    <link rel="stylesheet" href="{{ STATIC_URL }}css/flowplayer/minimalist.css">
{% endblock %}

{% block breadcrumbs %}
{% endblock %}

{% block content %}
<ul class="thumbnails">
    {% for video in videos %}
        <!-- Image -->
          <li class="span2">
            <a href="#modal-video-{{ video.id }}" data-toggle="modal" class="thumbnail">
                <div class="pagination-centered">{{ video.title }}</div>
                {% thumbnail video.image "200x200" crop="top" as im %}<img src="{{ STATIC_URL }}img/ytplay.png" alt="{{ image }}" style="background: url({{ im.url }}) center center" />{% endthumbnail %}
                <div class="photoname pagination-centered">{{ video.capture_date }}</div>
            </a>
          </li>
        <!-- Image -->

        <!-- Modal -->
        <div id="modal-video-{{ video.id }}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="width: 800px; height: 500px">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h3 id="myModalLabel">{{ video.title }}</h3>
          </div>
          <div class="modal-body">
            <div class="pagination-centered">
                <div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167">
                    <video>
                        <source type="video/mp4" src="{{ video.video }}">
                    </video>
                </div>
            </div>
          </div>
          <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
          </div>
        </div>

    {% endfor %}
</ul>

{% if is_paginated %}
    <div class="pagination">
        <ul>
            {% if page_obj.has_previous %}
                <li><a href="{% url peques-videos-page page_obj.previous_page_number %}">previous</a></li>
            {% endif %}
            <li class="active"><a href="">Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.</a></li>
            {% if page_obj.has_next %}
                <li><a href="{% url peques-videos-page page_obj.next_page_number %}">next</a></li>
            {% endif %}
        </ul>
    </div>
{% endif %}

{% endblock %}
