{% block title %}
    Stage {{ currentStage }}: Computer solves Math Tasks
{% endblock %}

{% block content %}

    {{ if session.config.development }}
    <button class="btn btn-danger otree-btn-next" style="float: right;">Skip</button>
    {{ endif }}

           {{ include C.COMPUTER_TYPES }}
    {{ if player.naive }}
    <p id="clickD">
            Click the button below to learn about the decision you will make.
        </p>
                <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="DecisionButton">
        Decision
      </button>
                </div>
    <div class="collapse" id="collapseExample">
      <div class="card card-body">
              <h5 class="card-title">Decision</h5>
          <div class="card-text">
              {{ include C.PART1_TEMPLATE }}
          </div>
      </div>
        <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_TEMPLATE }}
                </div>
            </div>
    <br>
            <p>
                When you are ready, click the "Next" button to answer some understanding questions.
            </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>

    {{else}}
        {{ if currentStage == 1 }}
            <p>In explaining the study, we use this badge to indicate the instances in which you will have to make a decision:
                <span class="badge bg-secondary">Decision</span></p>
        {{else}}
            <p>The rest of this stage works the same as the previous stage.</p>
        {{endif}}
    <p id="clickP">
            {{ if currentStage == 1 }}
            Click the button below to learn about Part 1 of this stage of the study.
        {{else}}
            Click the button below to review Part 1.
        {{endif}}
    </p>
            <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 {{ if currentStage == 2 }}(works the same as in previous stage){{endif}}</h5>
      <div class="card-text">
          {{ include C.PART1_TEMPLATE }}
      </div>
  </div>
    <br>
    <p id="clickP2">
         {{ if currentStage == 1 }}
            Click the button below to learn about Part 2 of this stage of the study.
        {{else}}
            Click the button below to review Part 2.
        {{endif}}
    </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 {{ if currentStage == 2  }}(works the same as in previous stage){{endif}}</h5>
            <p class="card-text">
                {{ include C.PART2_TEMPLATE }}
            </p>
        </div>
        <br>
        {{ if currentStage == 1 }}
        <img class="center" src="{{ static 'FailuresStrategicThinking/flow_chart_s1.png' }}"/>
        {{ elif currentStage == 2  }}
                <img class="center" src="{{ static 'FailuresStrategicThinking/flow_chart_s2.png' }}"/>
        {{endif}}
        <br>
        <p id="clickBonus">
            {{ if currentStage == 1 }}
                Click the button below to learn about your bonus payment.
        {{else}}
                Click the button below to review how your bonus payment is determined.
        {{endif}}
    </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 {{ if currentStage == 2  }}(works the same as in previous stage)
                    {{endif}}</h5>
                <div class="card-text">
                    {{ include C.BONUS_TEMPLATE }}
                </div>
            </div>
            <br>
            <p>
                When you are ready, click the "Next" button to answer some understanding questions.
            </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>
</div>
{{ endif }}


{% endblock %}



{% block styles %}
<style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
</style>
{% endblock %}

{% block scripts %}
<script>
$("#DecisionButton").click(function () {
    $("#DecisionButton").css("display", "none");
    $("#clickD").css("display", "none");
});
$("#Part1Button").click(function () {
    $("#Part1Button").css("display", "none");
    $("#clickP").css("display", "none");
});
$("#Part2Button").click(function () {
    $("#Part2Button").css("display", "none");
    $("#clickP2").css("display", "none");
});
$("#BonusButton").click(function () {
    $("#BonusButton").css("display", "none");
    $("#clickBonus").css("display", "none");
});
</script>
{% endblock %}