{% block title %}
    Decision {{ decision_name }}, Part 2
{% endblock %}

{% block content %}

    {{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
        <br><br>
    {{ endif }}
    <div class="alert alert-primary" role="alert">
        Before you make your part 1 decisions, on this page you decide how you want your bonus for part 2 to be
            determined in each of the possible scenarios that part 1 generates.
    </div>

    <p>
        In part 2 of this decision, the computer faces the {{ label_sep }} tasks.
        This is the same computer as in part 1 of this decision, and it is of the same quality.
    </p>

            <div class="col-md-12 text-center">
                <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#exampleModal">
                     Review Instructions
                </button>
            </div>
    <br>
        <p>
            In this part, you can <i>choose</i> to have your bonus determined in one of two ways:
        </p>
         <ul>
             <li>The amount of money the computer produces in the task in part 2.</li>
                          <li>The fixed payment, independently of how much the
                 computer produces.</li>
         </ul>
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
      <symbol id="info-fill" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
      </symbol>
    </svg>
    <div class="alert alert-info d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
          <h5 class="alert-heading">Reminder</h5>
       <ul  class="mb-0">
           <li><strong>Part 2:</strong></li>
       <ul  class="mb-0">
                <li><img src="{{ static 'FailuresStrategicThinking/goodComputer.png' }}" width="5%" height="5%" alt="">
            <strong>Good quality:</strong>
                                Produces {{ part2_bonus_good }} in the {{ label_sep }} task.
                    </li>
                <li>
                        <img src="{{ static 'FailuresStrategicThinking/badComputer2.png' }}" width="5%" height="5%" alt="">

               <strong>Bad quality:</strong>
                            Produces {{ part2_bonus_bad }} in the {{ label_sep }} task.
                    </li>
                      <li> <strong>Fixed payment:</strong> {{ C.OUTSIDE_OPTION }}</li>
        </ul>
            </ul>
</div>
        <p id="clickBonus">
            <strong>
                When you are ready, click the button below to choose how you want your bonus for part 2 to be determined in each of the possible scenarios.
            </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 you want your bonus to be determined
      </button>
        </div>
        <div class="collapse" id="collapseBonusChoice">
            <div class="card card-body">
                <p class="card-text">
                    {{ formfield 'bonusChoiceSepGood' label=label_Sep_Good }}
                    {{ formfield 'bonusChoiceSepBad' label=label_Sep_Bad }}
                    {{ formfield 'bonusChoicePool' label=label_Pool }}
                </p>
            </div>
            <br>
            <button style="float: right" class="btn btn-primary btn-large">Submit</button>
    </div>


{#    <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">#}
{#  <div class="modal-dialog modal-lg">#}
{#    <div class="modal-content">#}
{#      <div class="modal-header">#}
{#        <h5 class="modal-title" id="exampleModalLabel">Instructions</h5>#}
{#        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>#}
{#      </div>#}
{#      <div class="modal-body">#}
{#                      {{ include C.BONUS_PART1_TEMPLATE }}#}
{#                          {{ include C.BONUS_PART2_TEMPLATE }}#}
{#      </div>#}
{#      <div class="modal-footer">#}
{#        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>#}
{#      </div>#}
{#    </div>#}
{#  </div>#}
{#</div>#}

    {{ include C.REVIEW_INSTRUCTIONS }}


{% endblock %}



{% block styles %}

{% endblock %}

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