{% extends base_template %}
{% load i18n %}
{% load staticfiles %}
{% load my_filters %}
{% load i18n_filters %}
{% block watch_active %}active{% endblock watch_active %}

{% block title %}KA Lite{% endblock title %}

{% block headcss %}{{ block.super }}
    <style>

        .video-language-selector {
            position: relative;
            top: -2px;
        }

        .vidprev, .vidnext {
            padding-bottom: 10px;
            margin-top: -5px;
        }

        .related-exercise-button {
            float: right;
            margin-top: 5px;
        }

    </style>
    <!--[if IE]>
    <link href="{% static "video-js-4/video-js.mod.css" %}" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if lt IE 8]>
    <link href="{% static "video-js-4/video-js-old-ie.css" %}" rel="stylesheet" type="text/css">
    <![endif]-->
    <!--[if !IE]> -->
    <link href="{% static "video-js/video-js.css" %}" rel="stylesheet" type="text/css">
    <link href="{% static "video-js/video-speed.css" %}" rel="stylesheet" type="text/css">
    <!-- <![endif]-->
{% endblock headcss %}

{% block headjs %}

    {{ block.super }}

    <script src="{% url 'handlebars_templates' module_name='video' %}"></script>

    <script src="{% static "js/distributed/videoplayer.js" %}"></script>

    <script>
    $(function() {

        window.videoWrapperView = new VideoWrapperView({
            video_id: "{{ video.slug }}",
            el: $(".video-wrapper")
        });

    });
    </script>

    <!--[if IE]>
    <script src="{% static "video-js-4/video.js" %}"></script>
    <script>
        _V_.options.flash.swf = "{% static "video-js-4/video-js.swf" %}?" + Math.random();
    </script>
    <![endif]-->
    <!--[if !IE]> -->
    <script src="{% static "video-js/video.min.js" %}"></script>
    <script src="{% static "video-js/video-speed.js" %}"></script>
    <script>
        _V_.options.flash.swf = "{% static "video-js/video-js.swf" %}";
    </script>
    <!-- <![endif]-->

{% endblock headjs %}

{% block content %}

    {% if prev %}
    <div class="vidprev"><a href="{{ prev.path }}?lang={{ video.selected_language }}">&lt; {% trans prev.title %} <span class="progress-circle" data-video-id="{{ prev.id }}"></span></a></div>
    {% endif %}

    {% if next %}
    <div class="vidnext pull-right"><a href="{{ next.path }}?lang={{ video.selected_language }}"><span class="progress-circle" data-video-id="{{ next.id }}"></span> {% trans next.title %} &gt;</a></div>
    {% endif %}

    <div class="clear"></div>

    {% if video.related_exercise %}
    <span class="related-exercise-button">
        <span class="progress-circle" data-exercise-id="{{ video.related_exercise.slug }}"></span>
        {# Translators: Example usage=> Exercise: Name of Exercise #}
        {% trans "Exercise" as exercise %}
        <a href="{{ video.related_exercise.path }}" class="simple-button green" title="{% trans exercise %}: '{% trans video.related_exercise.title %}'">{% trans "Practice this concept" %}</a>
    </span>
    {% endif %}

    <div class="video-wrapper"></div>

{% endblock content %}
