{% block title %}
{#Click the pop-ups#}
{% endblock %}

{% block content %}
{{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
{{ endif }}

<div id="outer">
    <button type="button" class="btn btn-secondary inner" id="popUp" style="display: none;float: left;"
            onclick="clickingPopUp()">Pop-Up</button>
    <button type="button" class="btn btn-warning inner" id="pauseButton" onclick="pause()"
            style="display: none; float: right;">Pause</button>
    <button type="button" class="btn btn-success inner" id="resumeButton" onclick="resume()"
            style="display: none; float: right;">Resume</button>
</div>

<br>
    <p><div class="alert alert-success" role="alert" id="timeIsUp" style="display: none;">
  Your waiting time is over! You have finished the task.
</div></p>
        <p><div class="alert alert-success" role="alert" id="timeIsUpTrial" style="display: none;">
  Your waiting time is over! You have finished the practice session.
</div></p>
    <p id="maxTimeIsUp" style="display: none;">The remaining time is more than {{ C.MAX_WAIT_TIME }} minutes.</p>

    <br>
<button id="nextButton" style="float: right;display: none;" class="btn btn-primary btn-large">Next</button>


<input type="hidden" name="paused" id="paused" />
<input type="hidden" name="resumed" id="resumed" />
<input type="hidden" name="misses" id="misses" />
<input type="hidden" name="failed" id="failed" />

{% endblock %}

{% block styles %}
<style>
    #outer {
    width:100%;
    text-align: center;
}
.inner {
    display: inline-block;
}
</style>
{% endblock %}

{% block scripts %}
    <script src="{{ static 'waiting/waitPage.js' }}"></script>
{% endblock %}