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

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

{% block headcss %}{{ block.super }}
    <style>
        .download-actions {
            width: 600px;
            float: left;
            margin: 5px 10px 20px 0px;
            padding: 10px;
        }
        #language-packs {
            margin-top: 20px;
        }
        .lang-link, .lang-name, .lang-data, .upgrade-link {
            float: left;
            font-size: 12pt;
        }
        .upgrade-link a {
            font-weight: bold;
            text-decoration: underline;
        }
        .lang-link { width: 120px; }
        .lang-name { width: 250px; }
        .lang-data { width: 250px; }
        .upgrade-link { width: 300px; }

        #langpack-details {
            margin-top: 10px;
            display: none;
        }
        #langpack-details span {
            margin-left: 10px;
            font-weight: bold;
        }
        #languagepackdownload-progressbar {
            margin-bottom: 25px;
        }

    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript">
        var start_languagepackdownload_url = "{% url start_languagepack_download %}";
        var INSTALLED_LANGUAGES_URL = "{% url installed_language_packs %}"
        var AVAILABLE_LANGUAGEPACK_URL = "http://" + CENTRAL_SERVER_HOST +  "/api/i18n/language_packs/available/{{ VERSION }}";
        var defaultLanguage = "{{ default_language }}";
    </script>
    <script type="text/javascript" src="{% static 'js/updates/update_languages.js' %}"></script>
{% endblock headjs %}

{% block content %}
    <div class="download-actions get-language vertical-shadow">
        <h2 class="button_text">{% trans "Download or Update Language Packs" %}</h2>

        <span>
            {% trans "Language packs contain all available translations for the interface and video subtitles." %}
        </span>
        <br/>

        <!-- Some logic here to Show/Disable Buttons comparing data from show_language_packs to installed_languages
            Assume we are getting something like:
            [{"en": "percent_complete": 100, etc.}, {"fr": "percent_complete": 80, etc.}, etc.]
        -->
        <div id="langpacks">
            <span class= "button_style">
                <select id="language-packs"></select>
            </span>

            <button id="get-language-button" type="button" disabled>{% trans "Get Language Pack" %}</button>
        </div>
        <div id="langpack-details">
            <span id="lp-num-srts"></span><label> {% trans "subtitle(s)" %}</label>
            <span id="lp-pct-trans"></span><label> {% trans "translated" %}</label>
            <span id="lp-down-size"></span><label> ({% trans "to download" %})</label>
            <span id="lp-disk-size"></span><label> ({% trans "on disk" %})</label>
            <span id="lp-num-exers"></span><label> {% trans "exercise(s)" %}</label>
        </div>
    </div>
    <div class="clear"></div>

    <div id="languagepackdownload-progressbar">
        {% include "updates/progress-bar.html" %}
    </div>
    <div class="clear"></div>

    <div>
        <h2>{% trans "Installed Languages" %}</h2>
        <div class="installed-languages">
        </div>
    </div>
{% endblock content %}