{% extends 'otree/Base_UserFacing.html' %}


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

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

        .card-body {
            margin-top: 10px;
        }

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

        .otree-wait-page {
            max-width:970px
        }

        .progress-bar {
            width: 100%;
        }

    </style>
{% endblock %}

{% block body_main %}
<div class="otree-wait-page container">
    <div class="card">
        <h4 class="otree-wait-page__title card-header" id="_otree-title">
            {% block title %}{{ title_text }}{% endblock %}
        </h4>
        <div class="card-body">
            <div id="_otree-server-error" class="alert alert-danger" style="display:none">
                {{ "An error occurred."|gettext }}
            </div>
            {% block content %}
            <p class="otree-wait-page__body">{{ body_text }}</p>
            {% endblock %}
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"></div>
            </div>
        </div>
    </div>
</div>
{% endblock %}


{% block internal_scripts %}
    {{ 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() {
        socket = makeReconnectingWebSocket("{{ view.socket_url() }}");
        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();
                return;
            }

            window.location.reload();

        };
    }

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