{% block title %}
Scenario {{ player.round_number }}: Your task
{% endblock %}

{% block content %}

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

<div class="container">
    {{ include C.TASK_OVERVIEW }}

    <div class="text-center mb-3">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseDetail"
                aria-expanded="false" aria-controls="collapseDetail" id="DetailButton">
            One more important detail
        </button>
    </div>

    <div class="collapse" id="collapseDetail">
        <div class="card card-body mt-2">
            {{ include C.TASK_DETAIL }}

            <p>When you are ready, click "Next."</p>
            <div class="text-end"><button class="btn btn-primary btn-large">Next</button></div>
        </div>
    </div>
</div>

<script>
    document.getElementById("DetailButton").addEventListener("click", function() {
        this.style.display = "none";
    });
</script>

{% endblock %}