{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
Thank you for making the first eleven decisions
{% endblock %}

{% block content %}
<div class="row"></div>
<div class="row my-3 bg-light px-3 py-3 rounded border">
    <div class="col">
        <p>
            For the remaining four decisions, Option 1 is a bit different and explained in the following.
        </p>
        <button id="next_page_btn" class="btn btn-primary px-3" disabled>Ok. Please show me an example.</button>
    </div>
</div>

<script>
    let min_time_on_page = js_vars.min_time_on_page
    // Enables the next button after set time
    setTimeout(
        function () {
            document.getElementById("next_page_btn").removeAttribute("disabled")
            // document.getElementById("next_btn_info").style.display = "none"
        },
        min_time_on_page * 1000
    );
</script>

{% endblock %}