{% block title %}
    You are done with Part 1
{% endblock %}

{% block content %}

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

    <p>
        Now you enter part 2 of Stage {{ currentStage }} of the study.
    </p>
    <p>
        In part 2 of this stage of the study the computer faces {{ C.NUMBER_OF_TASKS_PART2 }} hard tasks.
        This is the same computer as in part 1, and it is of the same type.
    </p>
    {{ if player.soph }}
         <div class="alert alert-info" role="alert">
            {{ if taskDiff_stageless == 2 }} We know the computer is of the {{ compType_stageless }} type
            because it faced hard tasks in part 1 and made {{ mistakes_stageless }} mistakes.
            {{ else }}
             From part 1 we do not know the computer's type because it faced easy tasks.
             {{ endif }}
            {{ if player.risky_part2 }}You chose part 2's payoff to depend on the number of correct tasks.
             The computer is of the {{ compType_stageless }} type and, hence, made {{ mistakes_stageless }} mistakes in
             part 2.
             {{else}}
             You chose part 2 payoff to be independent of the number of correct tasks.
             {{endif}}
             Your payoff from part 2 is {{ player.payoffPart2 }}.
        </div>
    <p>
        When you are ready, continue to the next page.
    </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>
    {{ else }}
        <p>
            In this part you can <i>choose</i> to have your bonus determined in one of two ways:
        </p>
         <ul>
             <li>Add {{ C.BONUS_PER_CORRECT_TASK_PART2 }} to your bonus for each task the computer
                 solves correctly.</li>
             <li>Add fixed amount of {{ C.OUTSIDE_OPTION }} to your bonus, independently of how many tasks the computer
                 solves.</li>
         </ul>
        <p id="clickBonus">
            <strong>
                When you are ready, click the button below to choose how your bonus for part 2 is determined.
            </strong>
        </p>

            <div class="text-center">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBonusChoice"
              aria-expanded="false" aria-controls="collapseBonusChoice" id="BonusChoiceButton">
        Choose how we determine your bonus
      </button>
        </div>
        <div class="collapse" id="collapseBonusChoice">
            <div class="card card-body">
                <p class="card-text">
                    {{ formfields }}
                </p>
            </div>
            <br>
            <button style="float: right" class="btn btn-primary btn-large">Submit</button>
    {{ endif }}
    </div>



{% endblock %}



{% block styles %}

{% endblock %}

{% block scripts %}
    <script>
        $("#BonusChoiceButton").click(function () {
            $("#BonusChoiceButton").css("display", "none");
            $("#clickBonus").css("display", "none");
        });
    </script>
{% endblock %}