{{ extends "global/Page.html" }}

{{ block title }}
Please Wait
{{ endblock }}

{{ block content }}

<style>
.page-wrap {
    max-width: 760px;
    margin: 0 auto;
    padding: 24px;
}
.card {
    background: #f8f9fa;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    padding: 32px;
}
.badge {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eef4ff;
    color: #2457a6;
    font-weight: 700;
    margin-bottom: 18px;
}
.title {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 12px;
}
.message {
    font-size: 18px;
    line-height: 1.7;
    color: #333;
}
.note {
    background: #fffbea;
    border-left: 4px solid #f0ad4e;
    padding: 14px 16px;
    border-radius: 10px;
    color: #856404;
    margin-top: 18px;
    font-size: 15px;
}
</style>

<div class="page-wrap">
    <div class="card">
        <div class="badge">Please wait</div>
        <div class="title">Waiting for all group members to finish the quiz</div>

        <div class="message">
            The experiment will begin once all members of your group have completed the comprehension questions.
            This page will advance automatically.
        </div>

        <div class="note">
            If not all group members arrive within the time limit, you will receive your completion credit and the experiment will end.
        </div>

        <div style="display:none;">
            {{ next_button }}
        </div>
    </div>
</div>

<script>
let advanced = false;

function liveRecv(data) {
    if (data.all_done && !advanced) {
        advanced = true;
        document.getElementById('form').submit();
    }
}

setInterval(function() {
    liveSend({});
}, 2000);
</script>

{{ endblock }}