{% 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 software faces {{ C.NUMBER_OF_TASKS_PART2 }} People recognition tasks.
        This is the same software 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 software is of the {{ compType_stageless }} type
            because it faced People recognition tasks in part 1 and made {{ mistakes_stageless }} mistakes.
            {{ else }}
             From part 1 we do not know the type of the software because it faced Landscape recognition tasks.
             {{ endif }}
            {{ if player.risky_part2 }}You chose part 2's payoff to depend on the number of mistakes.
             The software 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 mistakes.
             {{endif}}
             Hence, your payoff from part 2 is {{ player.payoffPart22 }}.
        </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 }}
         Your bonus in this part starts at {{ C.PART2_MAX_BONUS }} and you can <i>choose</i> to have it determined in one
         of two ways:
 <ul>
     <li>For each mistake that the software makes, we reduce your bonus by
         {{ C.BONUS_PER_CORRECT_TASK_PART2 }}.</li>
     <li>Reduce your bonus by {{ part22_outside_bonus_penalty }}, independently of how many tasks the software
         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 %}