{% extends 'otree/Base.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 %}
{% 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 }};</script>{% endif %}
<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>
    {% 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.
        We also make it random to prevent load times from syncing up
        due to reload mechanisms. This will ensure that the page gets
        reloaded regularly, which is useful e.g. for intergenerational
        games.
        {% endcomment %}

        var RELOAD_PARAM = "?reload=1";

        var SECOND = 1000;
        // the randomness is useful so that when there are many players,
        // the GBAT page loads get spaced apart. I think this helps wait pages
        // finish quicker, and may prevent some other bugs.
        window.setInterval(function () {
          window.location.href = window.location.pathname + RELOAD_PARAM;
        }, (10 + Math.random() * 60) * SECOND);

        function setTabHiddenStatus(isHidden) {
          socket.send(JSON.stringify({
            'tab_hidden': isHidden
          }));
          var titleText = document.getElementById('_otree-title').textContent;
          var newIcon = isHidden ? '🟡' : '🟢';
          document.querySelector('title').textContent = newIcon + ' ' + titleText;
        }

        document.addEventListener("visibilitychange", event => {

          // {# if the user tabs in, we mark the tab active.
          // but not vice versa, since then it would be impossible for
          // someone to test a multiplayer game on a single PC #}
          if (!document.hidden)
            setTabHiddenStatus(false);
        })

        // for first page load, we don't consider unfocused tabs to be abandoned.
        // that way, browser bots and manual testing etc still work.
        function sendTabHiddenStatusInitial() {
          // {# better to use hidden rather than hasFocus()
          // because it's OK if the user has a split window with another window
          // focused. that should not be considered getting distracted.
          // hasFocus is too strict. even if you are in the page's JS console it considers you unfocused #}
          let gotDistracted = window.location.search.includes(RELOAD_PARAM) && document.hidden;
          setTabHiddenStatus(gotDistracted);
        }

        sendTabHiddenStatusInitial();

    {% endif %}


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

