{% load otree %}

{% block content %}
<style>
    body { background-color: #c0c0c0; }
    .otree-wait-page { max-width: 970px; }
    .card {
        background: white;
        border: 1px solid #3b84c3;
        border-radius: 5px;
        box-shadow: 0 0 20px #999;
        margin: 22px auto;
    }
    .card-body { margin-top: 10px; }
    .progress-bar { width: 100%; }
    .otree-timer {
          display: none;
        }
</style>
<div class="otree-wait-page container">
    <div class="card">
        <h4 class="otree-wait-page__title card-header">
            Please wait
        </h4>
        <div class="card-body">
            <p class="otree-wait-page__body">Waiting for other players&hellip;</p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated"
                     role="progressbar"></div>
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        liveSend({ arrived: true });
        setInterval(function () {
            liveSend({ ping: true });
        }, 5000);
    });

    function liveRecv(data) {
        if (data.advance) {
            document.getElementById('form').submit();
        }
    }
</script>
{% endblock %}