{% 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 not participant.treatment == 'base'}}
    <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 your bonus determined in one of two ways:#}
{#        </p>#}
{#         <ul>#}
{#                          <li>The amount of money the computer {{ if not participant.treatment == 'base' }} of your choice {{ endif }} produces in the task in part 2.</li>#}
{#                          <li>The fixed payment, independent of how much the {{ if not participant.treatment == 'base' }} 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 not participant.treatment == 'base'}}
each{{ else }}the{{ endif }} computer
           solved the
           {{ if environment_chosen_decision }}
                {{ label_pool }}
           {{ else }}
                {{ label_sep }}
           {{ endif }}
             {{ if not participant.treatment == 'base'}}
                    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 }}
               {{ if participant.treatment == 'salient' and not environment_chosen_decision}}
                    The computer which produced {{ payoff_part1_good }} is of the Good quality.
                    The computer which produced {{ payoff_part1_bad }} is of the Bad quality.
               {{ endif }}
           {{ else }}
               task and produced {{ payoff_part1 }}.
           {{ endif }}
       </strong></li>
{#               <li><strong>Part 1:</strong></li>#}
       <ul  class="mb-0">
                <li><img src="{{ static 'FailuresStrategicThinking/goodComputer.png' }}" width="5%" height="5%" alt="">
            <strong>Good quality:</strong>
                                Produces {{ if environment_chosen_decision }} {{ payoff_part1_indiv }} in the {{ label_pool }} task.
                    {{ else }} {{ payoff_part1_good }} in the {{ label_sep }} task.{{ endif }}
                    </li>
                <li>
             {{ if not participant.treatment == 'base'}}
                        <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 {{ if environment_chosen_decision }} {{ payoff_part1_indiv }} in the {{ label_pool }} task.
                    {{ else }} {{ payoff_part1_bad }} in the {{ label_sep }} task.{{ endif }}
                    </li>
        </ul>
           <br>
           <li>
               <strong> In part 2, you will <i>choose</i> how your bonus is determined:</strong>
         <ul>
             <li>The amount of money the computer {{ if not participant.treatment == 'base' }} of your choice {{ endif }} produces in the task <strong> in part 2</strong>, or</li>
                          <li>The fixed payment, independent of how much the {{ if not participant.treatment == 'base' }} computers produce. {{ else }} computer produces. {{ endif }}</li>
         </ul></li>

           <li><strong>Remember, in 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 not participant.treatment == 'base'}}
                        <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 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">
             {{ formfield 'bonusChoice' }}
                </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 }}

    <input type="hidden" name="timeSpentBonus" id="timeSpentBonus" />

{% endblock %}



{% block styles %}

{% endblock %}

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



        let pageTimeElapsed = 0;
        let pageTimerID = -1;
        function pageTick() {
          pageTimeElapsed++
          document.getElementById("timeSpentBonus").value = pageTimeElapsed;
        }
        window.onload = function() {
          if(pageTimerID === -1){
            pageTimerID = setInterval(pageTick, 100);  //calls pageTick every 100 milliseconds (decimals of a second)
          }
        };
    </script>
{% endblock %}