{% block title %}
   Stage {{ currentStage }}: Choose your part 2 bonus
{% endblock %}

{% block content %}

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

    <p>
        On this page you choose how your bonus in part 2 of stage {{ currentStage }} is determined.
    </p>
    <p>
    {{ if currentStage > 2 }}
        In part 2 of this stage the software faces {{ C.NUMBER_OF_TASKS_PART2 }} People
        recognition
        {{ else }}
        In part 2 of this stage the computer faces {{ C.NUMBER_OF_TASKS_PART2 }} hard
        {{ endif }} tasks.
        This is the same {{ if currentStage > 2 }}software{{ else }}computer{{ endif }} as in part 1, and it is of the
        same type{{ if currentStage == 1 or currentStage == 3 }}.{{ else }}, but
        it's a different {{ if currentStage > 2 }}software{{ else }}computer{{ endif }} from the one in the previous
        stage.
        {{ endif }}
    </p>
         <p>
            In this part you can <i>choose</i> to have your bonus determined in one of two ways:
        </p>
         <ul>
         {{ if currentStage > 2 }}
                  <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>
         {{ else }}
                     <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>
         {{ endif }}
         </ul>
    <p>
        You can have your bonus be determined differently depending on what happens in part 1.
        For each of the cases of what happens in part 1 below, select how your bonus is determined.
        After observing what happens in part 1, we will determine your bonus exactly as you choose on this page.
    </p>
        <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">
                    <h5 class="card-title">
{#                        How do we determine your bonus for part 2 in each of the following cases?#}
                        How do you want your part 2 bonus to be determined?
                    </h5>
                <p class="card-text">
                    {{ formfields }}
                </p>
            </div>
            <br>
            <button style="float: right" class="btn btn-primary btn-large">Submit</button>
    </div>



{% endblock %}



{% block styles %}

{% endblock %}

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