{% 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 other players in your group{% endblock %}</h3>
        </div>

        <div class="panel-body">
            You are the {{ Constants.G1players }}th out of {{ Constants.G1players }} players to make your donation decision. Please wait while others finish making their decisions.

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

{% endblock %}