{% extends "updates/base.html" %}
{% load i18n %}
{% load staticfiles %}

{% block title %}{% trans "Update Videos" %}{{ block.super }}{% endblock %}

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/jquery-ui/plugins/ui.dynatree.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/updates/update_videos.css' %}" />
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static 'js/jquery.dynatree.min.js' %}"></script>

    <script type="text/javascript">
        var URL_GET_ANNOTATED_TOPIC_TREE = "{% url get_annotated_topic_tree %}?lang={{ current_language }}";
        var URL_START_VIDEO_DOWNLOADS = "{% url start_video_download %}?lang={{ current_language }}";
        var URL_DELETE_VIDEOS = "{% url delete_videos %}";
        var URL_CANCEL_VIDEO_DOWNLOADS = "{% url cancel_video_download %}";
    </script>

    <script type="text/javascript" src="{% static 'js/updates/update_videos.js' %}"></script>
{% endblock headjs %}

{% block ga_setmetrics %}
    ga('set', 'metric1', {{ video_count }});
{% endblock ga_setmetrics %}

{% block content %}
    <div class="download-actions vertical-shadow">
        <h2 id="download-legend-unselected" class="button_text">
            {% trans "Please select videos to download (below)" %}
        </h2>

        <div class="client-online-only">
            <div id="help-info">
                <a id="download-help-link" target="_new" href="http://{{ central_server_host }}/faq/installation/bittorrent/">
                    {% trans "Q: How do I bulk-download videos?" %}
                </a>
            </div>
        </div>

        <button id="download-videos" type="button" class="enable-when-server-online">
            <span id="download-videos-text" class="new-video-count"></span>
        </button>

        <button id="delete-videos" type="button">
            <span id="delete-videos-text" class="old-video-count"></span>
        </button>
    </div>

    <div class="download-actions vertical-shadow">
        <h2>{% trans "Installed Language Packs" %}
            {# Translators: this text is a link; when clicked, admins will be able to manage locally installed resources. #}
          <a href="{% url update_languages %}">({% trans "Manage" %})</a>
        </h2>
        {% if not languages %}
            {% trans "No language packs installed." %}
        {% else %}
            <b>{{ default_language_name }} ({% trans "default" %})</b>
            {{ languages|join:", " }} {% if other_languages_count %}and {{ other_languages_count }} more. {% endif %}
        {% endif %}
    </div>

    <div style="clear: both; padding-top: 15px;">
        <h2>
            {% blocktrans with lang_name=current_language_native_name %}
                Videos for <a id="toggle_language_dropdown">{{ lang_name }}</a>
            {% endblocktrans %}
            <select id="download_language_selector">
            {% for lang_code, lang_meta in language_choices.iteritems %}
                <option value="{{ lang_code }}" {% if lang_code == current_language %}selected{% endif %}>{% if lang_meta.native_name %}{{ lang_meta.native_name }}{% else %}{% trans lang_meta.name %}{% endif %}</option>
            {% endfor %}
            </select>
        </h2>
    </div>

    <div style="clear: both;"></div>

    <div>
        <!-- note: id must match the "updates" app process name -->
        <div id="videodownload-progressbar">
            {% include "updates/progress-bar.html" %}
            <button id="retry-video-download" type="button">{% trans "Video download error... click to retry" %}</button>
        </div>

        <div>
            <button id="cancel-download" type="button">{% trans "Cancel Video Downloads" %}</button>
        </div>
    </div>
    <div style="clear: both;"></div>

    <div id="content_tree"><br/><h2>{% trans "Loading topic tree... Please wait!" %}</h2></div>
{% endblock content %}