{% load otree %}

    {{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
    {{ endif }}
                {{ if participant.treatment == 'deterministic' and player.round_number == 5 }}
                         {{ include C.COMPUTER_INTRO_TYPES_INTRO }}
                {{ else }}
                          {{ include C.COMPUTER_INTRO_TYPES }}
                {{ endif }}

            <div class="text-center">
  <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"
          aria-expanded="false" aria-controls="collapseExample" id="Part1Button">
    Part 1
  </button>
            </div>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
          <h5 class="card-title">Part 1</h5>
      <div class="card-text">
          {{ include C.PART1_INTRO_TEMPLATE }}
      </div>
  </div>
    <br>
    <p id="clickP2">
            Click the button below to learn about Part 2 of this stage of the study.
    </p>
    <div class="text-center">
        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePart2"
          aria-expanded="false" aria-controls="collapsePart2" id="Part2Button">
    Part 2
  </button>
    </div>
    <div class="collapse" id="collapsePart2">
        <div class="card card-body">
            <h5 class="card-title">Part 2</h5>
            <p class="card-text">
                {{ include C.PART2_INTRO_TEMPLATE }}
            </p>
        </div>
        <br>
        {{ if player.round_number == 1 }}
        <img class="center" src="{{ static 'intro/flow_chart_s1.png' }}"/>
        {{ else }}
                <img class="center" src="{{ static 'intro/flow_chart_s2.png' }}"/>
        {{ endif }}
        <br>
        <p id="clickBonus">
                Click the button below to learn about your bonus payment.
    </p>
        <div class="text-center">
            <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseBonus"
                    aria-expanded="false" aria-controls="collapseBonus" id="BonusButton">
                Your Bonus Payment
            </button>
        </div>
        <div class="collapse" id="collapseBonus">
            <div class="card card-body">
                <h5 class="card-title">Your Bonus</h5>
                <div class="card-text">
                    {{ include C.BONUS_INTRO_TEMPLATE }}
                </div>
            </div>
            <br>
            <p>
                When you are ready, click the "Next" button to continue.
            </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>
</div>