{% extends 'otree/WaitPage.html' %}
{% load otree %}

{% block title %}
    Waiting page…
{% endblock %}

{% block content %}
    <div class="alert alert-success text-lg-center lead" role="alert">
        <h2><strong>WAITING PAGE</strong></h2>
    </div>

<div class="card">
        <div class="card-body">
            <div style="font-size: 16pt; padding: 20px; line-height: 1.6;">

        {% if final_round %}

        <p>
        Please wait for the other participants to complete the previous round.</p>
                <p>
            As different participants go through the study at different paces, it might take a couple of minutes for other participants to reach this stage of the study. Please be patient during this time.
        </p>

        {% else %}

        <p>
            Please wait for the other participants to complete the previous round. Once all participants complete the round, you will be re-paired with a different <strong>{{ other_role }}  from the previous round</strong>.
        </p>
                                    <p style="LINE-HEIGHT:0.5pt"><br></p>

                <p>
        As different participants go through the study at different paces, it might take a couple of minutes for other participants to reach this stage of the study. Please be patient during this time.


        </p>

        {% endif %}

    </div>
        </div>
</div>

    <style>
        /* Hides default oTree wait page text to keep it clean */
        .otree-wait-page__title { display: none !important; }
        .otree-wait-page__body { display: none !important; }
    </style>

{% endblock %}