{% extends "themes/"|add:settings.page_theme|add:"/base.html" %}
{% load static %}

{% block head_extensions %}
  {% include 'pygal/repeat_head.html' %}

  <link href="{% static 'pygal/js/video-js/video-js.css' %}" rel="stylesheet">
  <script src="{% static 'pygal/js/video-js/video.js' %}"></script>
  <script src="{% static 'pygal/js/jquery.min.js' %}"></script>
{% endblock head_extensions %}

{% block modal %}
    <div id="openModal" class="modalDialog">
      <div class="image_modal">
  {% if item.use_internal_player %}
      <video id="MY_VIDEO_2" class="video-js vjs-default-skin webnail_modal" data-setup="{}"{% if item.is_repeatview %} autoplay{% endif %} controls poster="{{ item.url_webnail|safe }}">
        <source src="{{ item.url_item|safe }}" type='{{ item.mime_type }}'>
        <p class="vjs-no-js">To view {{ main.name }} please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
      </video>
  {% else %}
      <img class="webnail" src="{{ item.url_webnail|safe }}" alt="{{ item.name }}">
  {% endif %}
      </div>
      <a href="{{ item.url_userview|safe }}" class="close">X</a>
    </div>
{% endblock modal %}


{% block content %}
  {% with item=item.prv %}
    {% include "pygal/thumb.html" %}
  {% endwith %}
  
  {% if item.use_internal_player %}
  <div class="image">
    {% with bar=item.tagbar slim=True %}{% include 'themes/'|add:settings.page_theme|add:'/menubar.html' %}{% endwith %}
    <div class="image_bg" >
      <video id="MY_VIDEO_1" class="video-js vjs-default-skin webnail"  data-setup="{}" controls poster="{{ item.url_webnail|safe }}" preload width="{{ item.webnail_width }}" height="{{ item.webnail_height }}">
        <source src="{{ item.url_item|safe }}" type='{{ item.mime_type }}'>
        <p class="vjs-no-js">To view {{ main.name }} please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
      </video>
    </div>
  </div>
  {% else %}
  <div id="main" class="image">
    <div class="image_bg">
      <a href="{{ item.url_item|safe }}"><img class="webnail" src="{{ item.url_webnail|safe }}" alt="{{ item.name }}"></a>
    </div>
  </div>
  {% endif %}



  {% with item=item.nxt %}
    {% include "pygal/thumb.html" %}
  {% endwith %}

  <div class="clearfix"></div>
{% endblock content %}
