{% extends "global/Page.html" %}
{% load staticfiles otree_tags %}



{% block content %}

    <style>
        body {
            background-color: #c0c0c0;
        }
        .panel-primary {
            background: white;
            border: 1px solid #3b84c3;
            border-radius: 5px;
            box-shadow: 0 0 20px #999;
            /*width: 940px; */
            margin: 22px auto;
        }
        panel-body {
            margin-top: 10px;
        }
        .page-header {
           border: 1px solid #c0c0c0;
        }
        .otree-wait-page {
            max-width:970px
        }
        .progress-bar {
            width: 20%;
        }
    </style>

    <style>
        .otree-timer {
    display: none;
}
    </style>

        <script>
            SECOND = 1000 // milliseconds
            window.setTimeout(15 * SECOND); // 5 minutes
        </script>

    <div class="otree-wait-page container" id="otree-wait-page-body">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <!-- use the selector .otree-wait-page__title -->
            <h3 class="otree-wait-page__title panel-title" id="otree-wait-page-title-text">{% block head_title %}Waiting for players in Game 1{% endblock %}</h3>
        </div>

        <div class="panel-body">
            Please wait while players in Game 1 make their donation decisions.

            <div class="progress progress-striped active">
                <div class="progress-bar" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:17%"></div>
                1/6
            </div>
        </div>
    </div>
    </div>

{% endblock %}