{{ block title }}
<p style="font-size: 24px">Please wait, other participants need to finish the task.</p>
{{ endblock }}
{{ block content }}
<style>
    .otree-body {
        line-height: 1.6; /* line spacing */
        background-color: #f4f4f4; /* Light background for the page */
    }
    .container {
        background-color: #fff;
        margin: 30px auto;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    .waiting-time {
        font-size: 16px;
        color: #555;
        margin-bottom: 20px;
        text-align: center;
    }
    .task-list {
        border-top: 2px solid #eee;
        padding-top: 20px;
    }
    .task-list h3 {
        font-size: 18px;
        color: #333;
        text-align: center;
        margin-bottom: 10px;
    }
    .task-list p {
        font-size: 16px;
        color: #666;
        text-align: center;
        margin: 5px 0;
    }
    .otree-timer {
        display: none;
    }
</style>

<div class="container">
    {% if participant.vars.treatment == 'treatment2' %}
    <div class="waiting-time">
        <p>Your estimated wait time: <strong>40-50 seconds</strong>. We anticipate that this will be the <strong>last</strong> delay in this study.</p>
    </div>
    {% endif %}
    {% if participant.vars.treatment == 'treatment2' or participant.vars.treatment == 'treatment1' %}
    <div class="task-list">
        <h3><strong>Coming up next:</strong></h3>
        <p>9 rounds of transcription tasks</p>
    </div>
    {% endif %}
</div>

{{ endblock }}