{% block title %}
    Decision {{ decision_name }}, Part 1:
{% 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 are choosing whether the computer{{ if not participant.base }}s{{ endif }}
        face{{ if participant.base }}s{{ endif }} the {{ label_pool }} or {{ label_sep }} task in part 1.
    </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>
<!--<span class="badge rounded-pill bg-dark">Decide</span>-->
 Choose whether, in part 1, the computer{{ if not participant.base }}s{{ endif }}
        face{{ if participant.base }}s{{ endif }} the {{ label_pool }} or {{ label_sep }} task.
</p>
<div class="card">
  <div class="card-body">
      {{ formfield 'environment_choice' label=label }}
  </div>
</div>
{#    <br>#}
{#    <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-primary 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><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 }} or {{ 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>#}
{#</div>#}


<p>
    When you are ready, click "Submit."
</p>

   <!-- Modal -->
    {{ include C.REVIEW_INSTRUCTIONS }}


<button style="float: right" class="btn btn-primary btn-large">Submit</button>

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

{% endblock %}

{% block styles %}

{% endblock %}

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