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

{% load otree %}


{% block internal_styles %}
    {{ super() }}
    <style>
        .card {
            background: white;
            {#border: 1px solid #3b84c3;#}
            border-radius: 5px;
            box-shadow: 0 0 5px #999;
            /*width: 940px; */
            margin: 22px auto;
            margin-top: 15%;
        }

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

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

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

        .progress-bar {
            width: 100%;
        }
    </style>
{% endblock %}
{% comment %}this template is used by rooms, where js_vars does not exist{% endcomment %}
{% block body_main %}{% if is_defined('js_vars') and js_vars %}<script>var js_vars = {{ js_vars|json }};</script>{% endif %}
<div class="otree-wait-page container fade-in">
    <div class="card handdrawn" style="width: 60%">
        <h4 class="otree-wait-page__title card-header handrawn">
            {% block title %}{{ title_text }}{% endblock %}
        </h4>
        <div class="card-body handdrawn">
            <div id="_otree-server-error" class="alert alert-danger" style="display:none">
                {{ "An error occurred. Please check the logs or ask the administrator for help."|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>
    {% if is_defined('view.is_debug') and view.is_debug %}
        {% include 'otree/includes/debug_info.html' %}
    {% endif %}
</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();

        };
    }

    {% if is_defined('view.group_by_arrival_time') and view.group_by_arrival_time %}

        {% comment %}
        Refresh the whole page. This is documented behavior that enables things like
        allowing people to proceed if they have been waiting too long.
        {% endcomment %}

        window.setInterval(function() {
                  window.location.reload();
                }, 60*SECOND);


    {% endif %}


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