{% extends "base.html" %}

{% load compress static %}

{% block extra_head %}
    {% compress css %}
        <link type="text/css" href='{% static "css/progressbar.css" %}' rel="stylesheet">
        <style>
            #center {
                width: 500px;
                text-align: center;
                margin: 50px auto;
                padding: 50px;
                background: #fff;
                border: 1px solid #ddd;
                border-radius: 2px;
            }
            #progress_msg {
                font-size: 22px;
                font-weight: 600;
                margin-bottom: 30px;
            }
            #error {
                display: none;
            }
            #error .status_not_ok_message {
                display: inline-block;
                border: none;
                font-size: 18px;
            }
            #buttons {
                margin-top: 50px;
            }
        </style>
    {% endcompress %}
{% endblock %}

{% block content %}

    <div id="center">

        <div id="progress">
            <div id="progress_msg">The system is being added...</div>
            <progress value="{{ progress }}" max="100"></progress>
        </div>

        <div id="error">
            <div class="status_not_ok_message">
                An error occurred while adding the system. Please try again or contact INFINIDAT support.
            </div>
            <div id="buttons">
                <a href="/" class="button button-green">Back</a>
            </div>
        </div>

    </div>

    <script>
        function refresh() {
            $.get('{{ request.path }}')
            .done(function(data) {
                $('progress').val(data.progress);
                if (data.status == 'ENDED') {
                    window.location.href = data.url;
                }
                else if (data.status == 'ERROR') {
                    $('#progress').hide();
                    $('#error').show();
                }
            })
            .always(function() {
                setTimeout(refresh, 1000);
            });
        }
        $(refresh);
    </script>

{% endblock %}