{% block title %}
{{if participant.treatment == 'strategy'}}
    Decision {{ decision_name }}, Part 2
{{else}}
Decision {{ decision_name }}
{{endif}}
{% 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">
        {{if participant.treatment == 'strategy'}}
        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.
        {{else}}
        On this page you first plan how you want your bonus for part 2 to be determined in each of the possible scenarios that part 1 generates.
        Then, you make your part 1 choice.
        {{endif}}
    </div>

    <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>

            <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 of your choice produces in the task in part 2.</li>#}
{#                          <li>The fixed payment, independently of how much the#}
{#                 computers produce.</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:</strong></li>
       <ul  class="mb-0">
                <li><img src="{{ static 'FailuresStrategicThinking/goodComputer.png' }}" width="5%" height="5%" alt="">
                <strong>Good quality:</strong>
                        {{ if current_parameterization <= 2 or current_parameterization == 6 or current_parameterization == 7 }}
                            Produces {{ part1_bonus_pool }} in both {{ label_pool }} and {{ label_sep }} tasks.
                        {{ else }}
                            Produces {{ part1_bonus_pool }} in the {{ label_pool }} task and {{ part1_bonus_good_sep }} in the
                    {{ label_sep }} task.
                        {{ endif }}
                </li>
                <li>
                    {{ if participant.det }}
                        <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 {{ part1_bonus_pool }} in the {{ label_pool }} task and {{ part1_bonus_bad_sep }} in the
                        {{ label_sep }} task.
                </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>
                        <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 'bonusChoiceSep' label=label_Sep }}
                    {{ formfield 'bonusChoicePool' label=label_Pool }}
                </p>
            </div>
                {{if participant.treatment == 'plan'}}
    <p id="clickEnv">
            <strong>
                When you are ready, click the button below to choose part 1 task.
            </strong>
        </p>

            <div class="text-center">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseEnvChoice"
              aria-expanded="false" aria-controls="collapseBonusChoice" id="EnvChoiceButton">
        Choose part 1 task
      </button>
        </div>
        <div class="collapse" id="collapseEnvChoice">
            <div class="card card-body">
                <p class="card-text">
                    {{ formfield 'environment_choice' label=label_env }}
                </p>
            </div>
            </div>
    {{endif}}
            <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 }}

    <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>
<script>
        $("#EnvChoiceButton").click(function () {
            $("#EnvChoiceButton").css("display", "none");
            $("#clickEnv").css("display", "none");
        });
    </script>
{% endblock %}