{% extends "global/Page.html" %}
{% load otree static %}



{% block content %}

<div class="container">
    <div class="card" >
        <h4 class="card-header ">
            <div class=" alert alert-warning" align="center" style="margin-bottom: 0px">Bitte warten</div>
        </h4>
        <div class="card-body">
            <p align="center"><br><br><br><br><br><br>Bitte warten Sie bis alle teilnehmenden Personen bereit sind.
                          <br><br>An dieser Stelle des Experiments kann es zu längeren Wartezeiten kommen.<br><br><br><br><br><br><br><br>
                                    Fortschritt aller Personen:</p>
            <div class="progress">
                <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100" id="pbar"></div>
            </div>
        </div>
    </div>
</div>


<style>

.card {
    background: white;
    border: 1px solid #3b84c3;
    border-radius: 5px;
    box-shadow: 0 0 20px #999;
    /* width: 940px; */
    margin: 22px auto;
}

.alert-warning {
    width: 865px;
}


body {
    background-color: #c0c0c0;
}

.input-group {

    margin-left: auto;
    margin-right: auto;
    //width: 200px
    //margin-left: 25px;
}

.form-control  {
    //color: #3e93e8;
    margin-left: 25px;
    //margin-right: 300px;
    //min-width: 150px;
}

//.otree-form {
//    width: 80%;
//    padding-left: 200px
//}

</style>

<script>
    function liveRecv(data) {
        if (data["all_arrived"]) {
            document.getElementById("form").submit();
        }
        document.getElementById("pbar").innerHTML = data["%_waiting"] + "%";
        document.getElementById("pbar").style.width = data["%_waiting"] + "%";
    }

    document.addEventListener("DOMContentLoaded", (event) => {
        liveSend({"new_arrival": true});
    });
</script>

{% endblock %}