{% 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>
    {{ endif }}
    {{ if participant.treatment == 'deterministic'}}
    <p>
        In part 2 of this decision, the computers face the {{ label_sep }} tasks.
        These are the same computers as in part 1 of this decision, and they are of the same quality.
    </p>
    {{ else }}
    <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>
    {{ endif }}

            <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 the donation be determined in one of two ways:
        </p>
         <ul>
                          <li>The amount of money the computer {{ if participant.treatment == 'deterministic' }} of your choice {{ endif }} produces in the task in part 2.</li>
                          <li>The fixed payment, independent of how much the {{ if participant.treatment == 'deterministic' }} computers produce. {{ else }} computer produces. {{ endif }}</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>In part 1 of this decision, {{ if participant.treatment == 'deterministic'}}
each{{ else }}the{{ endif }} computer
           solved the
           {{ if environment_chosen_decision }}
                {{ label_pool }}
           {{ else }}
                {{ label_sep }}
           {{ endif }}
             {{ if participant.treatment == 'deterministic'}}
                    task.
                {{ if environment_chosen_decision }}
                    Each computer produced {{ payoff_part1_indiv }}.
                {{ else }}
                    One computer produced {{ payoff_part1_good }}, and the other produced {{ payoff_part1_bad }}.
                {{ endif }}
           {{ else }}
               task and produced {{ payoff_part1 }}.
               {{ if participant.treatment == 'salient' and not environment_chosen_decision}}
                    The computer is of the {{ if comp_type == 1 }}Good{{ else }}Bad{{ endif }} quality.
                {{ endif }}
           {{ endif }}
       </strong></li>
           <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>
             {{ if participant.treatment == 'deterministic'}}
                        <img src="{{ static 'FailuresStrategicThinking/badComputer.png' }}" width="5%" height="5%" alt="">
                    {{ else }}
                        <img src="{{ static 'FailuresStrategicThinking/badComputer2.png' }}" width="5%" height="5%" alt="">
                    {{ endif }}

               <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 the donation 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 the donation
      </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>
    </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">Decision {{ player.round_number }}'s 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 %}