{% extends base_template %}
{% load i18n %}
{% load my_filters %}

{% block watch_active %}active{% endblock watch_active %}

{% block headcss %}{{ block.super }}
    <style>
        .long-description {
            margin-top: 5px;
        }
        li {
           font-size: 15px;
           line-height: 23px;
           margin-left: 10px;
        }
        .subtitle-indicator {
            background-color: #aaf;
            margin: 0px 1px 0px 0px;
            padding: 2px;
        }
        .dubbedvideo-indicator {
            background-color: #faa;
            margin: 0px 1px 0px 0px;
            padding: 2px;
        }
    </style>
{% endblock headcss %}


{% block headjs %}{{ block.super }}
    <script type="text/javascript">
        $(function() {
            $('.video-unavailable').removeAttr("href");

            // TODO(bcipolli): use javascript to translate here
            $('a.video-unavailable').attr("title", "{% trans 'This video is not downloaded.' %}");
        });
    </script>
{% endblock headjs %}


{% block content %}
    <h1 class="title-header">
        <div class="title">{% trans title %}</div>
        <div class="long-description">{% if description %}{% trans description %}{% endif %}</div>
    </h1>

    {% if topics %}
    <h2>{% trans "Subtopics" %}</h2>
    <ol>
        {% for subtopic in topics %}
        <li>
            <span>
                <a href="{{ subtopic.path }}" class="topic-link topic-{% if subtopic.nvideos_available == 0 %}un{% endif %}available" title="{% blocktrans with avail=subtopic.nvideos_available known=subtopic.nvideos_known local=subtopic.nvideos_local %}{{ avail }} / {{ known }} video(s) are available ({{ local }} locally).{% endblocktrans %}">
                    {% trans subtopic.title %}
                </a>
            </span>
        </li>
        {% endfor %}
        <br/>
    </ol>
    {% endif %}

    {% if videos %}
    <h2>{% trans "Videos" %}</h2>
    <ol>
        {% for video in videos %}
        <li>
            <span class="progress-circle" data-video-id="{{ video.id }}"></span>
            {% comment %}Four scenarios:
            1. Offline, local video
            2. Offline, no local video
            3. Online, local video
            4. Online, no local video
            {% endcomment %}
            <a href="{{ video.path }}" class="video-link client-online-only video-{% if not video.available %}un{% endif %}available">
                {% trans video.title %}
            </a>
            <a href="{{ video.path }}" class="video-link not-client-online-only video-{% if not video.on_disk %}un{% endif %}available">
                {% trans video.title %}
            </a>

            {# dubbed videos #}
            {% for lang, avail in video.availability.iteritems %}
                {% if avail.on_disk %}
                <span class="dubbedvideo-indicator">
                    <a href="{{ video.path }}?lang={{ lang }}">
                        {{ lang }}
                    </a></span>
                {% endif %}
            {% endfor %}

            {# subtitles #}{# TODO(bcipolli) don't hard-code to english? #}
            {% for lang in video.availability.en.subtitles.keys %}
                <span class="subtitle-indicator">
                    {{ lang }}
                </span>
            {% endfor %}
        </li>
        {% endfor %}
        <br/>
    </ol>
    {% endif %}

    {% if exercises %}
    <h2>{% trans "Exercises" %}</h2>
    <ol>
        {% for exercise in exercises %}
        <li>
            <span class="progress-circle" data-exercise-id="{{ exercise.name }}"></span>
            <a class="exercise-link" href="{{ exercise.path }}">{% trans exercise.title %}</a>

            {# translated exercises #}
            {% for lang in exercise_langs|get_item:exercise.id %}
                <span class="dubbedvideo-indicator">
                    <a href="{{ exercise.path }}?lang={{ lang }}">
                        {{ lang }}
                    </a>
                </span>
            {% endfor %}

        </li>
        {% endfor %}
        <br/>
    </ol>
    {% endif %}
{% endblock content %}