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

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

{% block headcss %}{{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap-fileupload.min.css' %}" />

    <style>
        .vertical-shadow {
            margin-left: 5px;
            margin-bottom: 10px;
            padding-bottom: 10px;
        }

        .container {
            margin-left: 130px;
        }

        #software_available {
            margin-left: -4px;
            margin-top: 6px;
        }

        #cancel-update-kalite {
            margin-top: 10px;
            margin-bottom: 15px;

        }

        h2 {
            font-size: 24px;
            margin-left: 45px;
        }

        img {
            margin-left: 15px;
        }
    </style>
{% endblock headcss %}

{% block headjs %}{{ block.super }}
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery-ui/bootstrap-fileupload.min.js' %}"></script>
    <script type="text/javascript">
    // Callback functions

    function software_start_callback(progress_log, resp) {
        if (!progress_log) {
            clear_messages()
            show_message("error", resp.status_code + resp.responseText);
        }
    }

    function software_check_callback(progress_log, resp) {
        // When video status is checked
        if (progress_log) { // check succeeded

            if (progress_log.stage_percent == 1.) {
                // 100% done with the video
                setNodeClass(currentKey, "complete");
                if (progress_log.process_percent == 1.) {
                    // 100% done with ALL videos.
                    $(".progress-section, #cancel-download").hide();
                    updatesReset(progress_log.process_name);
                    if ($(".subtitle-section:visible").length == 0) {
                        $("#cancel-download").hide();
                    }
                    return;
                }

            } else if (progress_log.completed) {
                // Completed without 100% done means there was a problem.
                $("#retry-video-download").show();
                $("#cancel-download").hide();
            } else {
                // Everything's good for now!
                $("#retry-video-download").hide();
                $("#cancel-download").show();
            }
            $("#cancel-download").show();
        } else { // check failed.
            switch (resp.status) {
                case 403:
                    window.location.reload()  // Only happens if we were remotely logged out.
                    break;
                default:
                    show_message("error", "Error downloading videos: " + resp.responseText);
                    clearInterval(window.download_subtitle_check_interval)
                    break;
            }
        }
    }

    var software_callbacks = {
        start: software_start_callback,
        check: software_check_callback,
    };
    </script>

    <script type="text/javascript">
    function version_callback(data) {
        // Check to see if the remote software matches the local software version.
        //   If not, alert the user!
        var current_version = "{{ software_version }}";
        var remote_version = data.version;
        if (! remote_version ) {
            show_message("error", "Remote version information unavailable.", "id_message_update");
        } else if (current_version != remote_version) {
            $("#update_info").show();  // show the related div
            $("#internet_update").show();

            version_info = data["version_info"];

            //alert("update available! " + current_version + " < " + remote_version);
            $("#remote_version").text(remote_version);
            $("#remote_release_date").text(version_info[remote_version].release_date);

            // Update feature list
            //$("#new_features").text("");
            for (version in version_info) {  // loop through all features of all uninstalled versions
                if (! version_info[version]["new_features"]) {
                    $("#new_features").append("<li>(None)</li>");
                } else {
                    for (fi in version_info[version]["new_features"]) {
                        $("#new_features").append("<li>" + version_info[version]["new_features"][fi] + "</li>");
                    }
                }
                if (! version_info[version]["bugs_fixed"]) {
                    $("#bugs_fixed").append("<li>(None)</li>");
                } else {
                    for (fi in version_info[version]["bugs_fixed"]) {
                        $("#bugs_fixed").append("<li>" + version_info[version]["bugs_fixed"][fi] + "</li>");
                    }
                }
            }
        }
    }

    function download_urls_callback(data) {
        locale = "en";//{{ current_locale }}"
       $("#software_available").append("<option value='" + data[locale].url + "'>" + locale + " (" + data[locale].size + "MB)</option>");
    }
    </script>

    <script type="text/javascript">
        $(function() {
            updatesStart("update", 1000, software_callbacks)

            setTimeout(function() {
                get_server_status({path: "{% url get_server_info %}"}, ["online"], function(status){
                    // We assume the distributed server is offline.
                    //   if it's online, then we show all tools only usable when online.
                    //
                    // Best to assume offline, as online check returns much faster than offline check.
                    if(false && (!status || !status["online"])){
                        show_message("error", "{% trans 'Your installation is offline, and therefore cannot access updates.' %}", " id_offline_message")
                    } else {
                        $("#software_available").removeAttr("disabled");
                        $("#download-update-kalite").removeAttr("disabled");
                        $("#upload-update-kalite").removeAttr("disabled");
                        clear_message("id_offline_message")
                    }
                });

            }, 200);

            $("#download-update-kalite").click(function() {
                // Get all videos to download
                //updatesStart("update", 1000, software_callbacks)

                // Start the download and updating process
                doRequest("{% url start_update_kalite %}", { "url": $("#software_available option:selected")[0].value })
                    .success(function() {
                        updatesStart_callback("update")
                    }).fail(function(response) {
                        show_message("error", "Error starting update process (" + response.status + "): " + response.responseText);
                    });

                // Update the UI to reflect that we're waiting to start
                $("#cancel-update").show();
            });
            // onload
        });
    </script>
{% endblock headjs %}

{% block content %}
<!---Breadcrumb -->
    <ul class="breadcrumb">
      <li><a href="{% url homepage %}">{% trans "Home" %}</a> <span class="divider">/</span></li>
      <li><a href="{% url update %}">{% trans "Update" %}</a> <span class="divider">/</span></li>
      <li class="active">{% trans "System Update" %}</li>
    </ul>

    <!---Current System status -->
    <div>
        <div class="">
            <div class= "row">
                <div class="span6 vertical-shadow">
                    <h2>{% trans "Current Installation" %}</h2>

                    <dl class="dl-horizontal">
                        <dt>{% trans "Current Version" %}:</dt>
                        <dd>{{ software_version }}</dd>
                        {# Translators: this specifies the software release date #}
                        <dt>{% trans "Release Date" %}:</dt>
                        <dd>{{ software_release_date }}</dd>
                        <dt>{% trans "Database Size %}:</dt>
                        <dd>{{ database_size|floatformat }} MB</dd>
                        <dt>{% trans "Device ID" %}:</dt>
                        <dd>{{ device_id }}</dd>
                        <dt>{% trans "Last recorded usage" %}:</dt>
                        <dd>{{ database_last_updated }}</dd>
                        <dt>{% trans "Installation Location" %}:</dt>
                        <dd>{{ install_dir }}</dd>
                    </dl>
                </div>

                <div id="update_info" class="span6 offset6 vertical-shadow" style="display:none">
                    <h2>{% trans "Available Update" %}</h2>
                    <dl class="dl-horizontal">
                        <dt>{% trans "Latest Version" %}:</dt>
                        <dd><span id="remote_version"></span></dd>
                        <dt>{% trans "Released Date" %}:</dt>
                        <dd><span id="remote_release_date"></span></dd>
                        <dt>{% trans "Description" %}:</dt>
                        <dd>{% trans "New Features" %}:
                            <ul id="new_features"></ul>
                            {% trans "Bugs fixed" %}:
                            <ul id="bugs_fixed"></ul>
                        </dd>
                    </dl>
                </div>

                <div class="span4 offset2">
                    <div id="internet_update" style="display:none">
                        {# Translators: this text specifies where admins can get an update from #}
                        <h4>{% "From the internet" %}:</h4>
                        <button type="button" class="btn" id="download-update-kalite" disabled>{% trans "Download and update" %}</button>
                        <select class="span1" id="software_available" style="display:none"></select>
                        <!---File Upload Button -->
                    </div>
                    <div id="file_update">
                        <h4>{% trans "Use local file" %}:</h4>
                        <div class="fileupload fileupload-new" data-provides="fileupload" id="upload-update-kalite">
                            <span class="btn btn-file"><span class="fileupload-new">{% trans "Select file" %}</span><span class="fileupload-exists">Change</span><input type="file" /></span>
                            <span class="fileupload-preview"></span>
                            <a href="#" class="close fileupload-exists" data-dismiss="fileupload" style="float: none">×</a>
                        </div>
                    </div>
    <div class="text-right"><button type="button" class="btn btn-danger" id="cancel-update-kalite">{% trans "Cancel update" %}</button></div>
    <div style="clear: both;"></div>
                </div>

            </div>
        </div>

    <div style="clear: both;"></div>
    <!-- Progress Bar, note: id must match the "updates" app process name -->
    <div id="update-progressbar">
        {% include "updates/progress-bar.html" %}
    </div>


    <!-- fake way to do JSONP -->
    <script type="text/javascript" src="{% central_server_api path='/api/version' %}?callback=version_callback&current_version={{ software_version }}"></script>
    <script type="text/javascript" src="{% central_server_api path='/api/download/kalite/' %}?callback=download_urls_callback"></script>
{% endblock content %}