{% extends 'otree/Base.html' %}
{% load i18n %}
{% load staticfiles %}
{% block head_title %}{{ title_text }}{% endblock %}

{% block internal_styles %}
    {{ block.super }}
    <style>
        body {
            background-color: #c0c0c0;
        }

        div.panel-primary {
            background: white;
            border: 1px solid #3b84c3;
            border-radius: 5px;
            box-shadow: 0 0 20px #999;
            /*width: 940px; */
            margin: 22px auto;
        }

        div.panel-body {
            margin-top: 10px;
        }

        div.page-header {
           border: 1px solid #c0c0c0;
        }

        #otree-wait-page-body {
            max-width:970px
        }

        .progress-bar {
            width: 100%;
        }
    </style>
{% endblock %}

{% block body_main %}

<div id="otree-wait-page-body" class="container">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 id="otree-wait-page-title-text" class="panel-title">{% block title %}{{ title_text }}{% endblock %}</h3>
        </div>
        <div class="panel-body">
            <div id="otree-server-error" class="alert alert-danger" style="display:none">
                {% blocktrans trimmed %}An error occurred. Please check the logs or ask the administrator for help.{% endblocktrans %}
            </div>
            <div id="error-traceback" class="alert alert-danger" style="display:none"></div>
            {% block content %}
            <p id="otree-wait-page-body-text">{{ body_text }}</p>
            {% endblock %}
            <div class="progress progress-striped active">
                <div class="progress-bar" role="progressbar"></div>
            </div>
        </div>
    </div>
    {% if view.is_debug %}
        {% include 'otree/includes/debug_info.html' %}
    {% endif %}
</div>
{% endblock %}

{% block internal_scripts %}
    {{ block.super }}
    <!-- this is an HTML file rather than JavaScript static file because context variables need to be passed to it -->
<script type="text/javascript">
$(document).ready(function () {

    var socket;

    initWebSocket();

    function initWebSocket() {

        var ws_scheme = window.location.protocol == "https:" ? "wss" : "ws";
        var ws_path = ws_scheme + '://' + window.location.host + "{{ view.socket_url|safe }}";
        socket = new ReconnectingWebSocket(ws_path);
        socket.onmessage = function(e) {

            var data = JSON.parse(e.data);

            // Handle errors
            if (data.error) {
                // maybe the div's default text doesn't get shown
                $("#otree-server-error").text(data.error);
                $("#otree-server-error").show();
                if (data.traceback) {
                    $("#error-traceback").html('<pre>' + data.traceback + '</pre>');
                    $("#error-traceback").show();
                }
                return;
            }


            console.log('Received redirect message', e.data);
            window.location.href = '{{ view.redirect_url|safe }}';

        };
        socket.onopen = function() {
            console.log('WebSocket connected');
        };
        socket.onclose = function() {
            console.log('WebSocket disconnected');
        };
    }

 });
 </script>
 {% endblock %}

