{% extends 'main/bootstrap.html' %}

{% load bootstrap3 %}
{% load staticfiles %}

{% block bootstrap3_content %}
    <script type="text/javascript">
        {% autoescape off %}
            function checkRBPMOperationStatus() {
                $.ajax({
                    url: "/api/rbpm/status",
                    async: true,
                    success: function (data) {
                        var message = data['message'];
                        window.rbpmOperationActive = false;
                        if (data['current'] > 0 && data['all'] > 0) {
                            message = data['message'] + ': ' + (data['current'] + 1) + "/" + data['all'] + " (" + Math.floor(100 * (data['current'] + 1) / data['all']) + "%)";
                            window.rbpmOperationActive = true;
                        }
                        $('#rbpm_operation_status span').html(message);
                        $('#rbpm_operation_status').css('width', Math.floor(100 * (data['current'] + 1) / data['all']) + '%');
                        if (data['current'] > 0 && data['all'] > 0) {
                            $('#rbpm_operation_status').addClass('active');
                            $('#rbpm_operation_status span').css('color', 'white');
                            $('.disable-if-running').prop('disabled', true);
                        } else {
                            $('#rbpm_operation_status').removeClass('active');
                            $('#rbpm_operation_status span').css('color', 'black');
                            $('#rbpm_operation_status').css('width', '0%');
                            $('.disable-if-running').prop('disabled', false);
                        }
                    }
                });
            }
            function startUpdatingStatus() {
                window.rbpmOperationStatus = setInterval(checkRBPMOperationStatus, 1000);
            }
            function stopUpdatingStatus() {
                checkRBPMOperationStatus();
                clearInterval(window.rbpmOperationStatus)
            }
            function rbpmReadCurrentProject() {
                $.ajax({
                    url: "/api/configuration/get/current",
                    success: function (result) {
                        projectName = result.configs.name.replace('.json', '');
                        $("#currentProject").html("<strong>" + projectName + "</strong>");
                    }
                });
            }

            function rbpmReadCurrentEnvironment() {
                $.ajax({
                    url: "/api/configuration/get/environment",
                    success: function (result) {
                        console.log(result)
                        $("#currentEnvironment").html("<strong>" + result.configs.environment + "</strong>");
                    }
                });
            }


            $(document).ready(function () {
                checkRBPMOperationStatus();
                if (window.rbpmOperationActive === true) {
                    startUpdatingStatus();
                } else {
                    stopUpdatingStatus();
                }
                rbpmReadCurrentProject();
                rbpmReadCurrentEnvironment();
            });
        {% endautoescape %}
    </script>
    <nav class="navbar navbar-default">
        <ul class="nav navbar-nav">
            <li><a href="{% url 'home' %}"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> Home</a>
            </li>
            <li><a href="{% url 'configuration' %}">Configuration</a></li>
            <li><a href="{% url 'importdata' %}">Import</a></li>
            <li><a href="{% url 'viewdata' %}">View</a></li>
            <li><a href="{% url 'comparedata' %}">Compare</a></li>
            <li><a href="/admin">Manage</a></li>
            <!-- <li><a href="{% url 'managedata' %}">Manage</a></li> -->
            <li><a href="{% url 'exportdata' %}">Export</a></li>
        </ul>
        <div class="progress col-md-4 pull-right navbar-text">
            <div id="rbpm_operation_status" class="progress-bar progres-bar-info progress-bar-striped"
                 role="progressbar" style="width: 0%; white-space: nowrap; position: relative;">
                <span style="color: black;">Idle</span>
            </div>
        </div>
        <div class="nav navbar-text pull-right">Status:</div>
        <div id="currentProject" class="nav navbar-text pull-right">---</div>
        <div class="nav navbar-text pull-right">Current project:</div>
        <div id="currentEnvironment" class="nav navbar-text pull-right">---</div>
        <div class="nav navbar-text pull-right">Environment:</div>

    </nav>

    <div class="container">
        <h2>{% block title %}{% endblock %}</h2>
        {% block content %}(no content){% endblock %}
    </div>
    <div class="container">
        {% autoescape off %}{% bootstrap_messages %}{% endautoescape %}
    </div>
    <div id="messageArea">
        <div class="alert alert-info alert-dismissable">
            <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
        </div>
    </div>
    <div class="panel-footer">
        {% block footer %} {% endblock %}
    </div>
{% endblock %}