{% load otree %}

   <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">
          <p>
                There {{ if participant.det }}are two{{ else }}is a{{ endif }}
              <strong>Computer{{ if participant.det }}s{{ endif }}</strong> which
              {{ if participant.det }}are{{ else }}is{{ endif }} important for this stage of the study.
            </p>
    <p>
        The computer{{ if participant.det }}s{{ endif }} solve{{ if not participant.det }}s{{ endif }} Math tasks.
        There are two types of tasks: <strong>{{ label_pool }} tasks</strong> and <strong>{{ label_sep }} tasks</strong>.
        The computer{{ if participant.det }}s{{ endif }} can be of the Good or the Bad type.
        {{ if participant.det }}One computer is of the Good type and the other computer is of the Bad type.{{ endif }}
        The computer{{ if participant.det }}s{{ endif }}' type{{ if participant.det }}s{{ endif }} in this decision are
        not necessarily the same as the computer{{ if participant.det }}s{{ endif }}'
        type{{ if participant.det }}s{{ endif }} in other decisions.
    </p>
                     {{ include C.COMPUTER_TYPES }}

                 <h5>Part 1</h5>
              {{ include C.PART1_TEMPLATE }}

          <h5>Part 2</h5>
              {{ include C.PART2_TEMPLATE }}

          <h5>Your Bonus</h5>
                    {{ 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>