{% block title %}
   Stage {{ currentStage }}: Software solves Image-recognition Tasks
{% endblock %}

{% block content %}

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

           {{ include C.SOFTWARE_TYPES }}

<!--    <p>In explaining the study, we use this badge to indicate the {{ if player.baseline }} two instances {{else}}-->
<!--        instance{{endif}} in which you will have to make a decision:-->
<!--        <span class="badge bg-secondary">Decision</span>-->
    <p id="clickP">
        {{ if currentStage == 3 }}
            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 == 4 }}(works the same as in previous stage){{endif}}</h5>
      <div class="card-text">
          {{ include C.PART12_TEMPLATE }}
      </div>
  </div>
    <br>
    <p id="clickP2">
        {{ if currentStage == 3 }}
        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 == 4 }}(works the same as in previous stage){{endif}}</h5>
            <p class="card-text">
                {{ include C.PART22_TEMPLATE }}
            </p>
        </div>
        <br>
         {{ if currentStage == 3 }}
        <img class="center" src="{{ static 'FailuresStrategicThinking/flow_chart_s3.png' }}"/>
        {{ elif currentStage == 4  }}
                <img class="center" src="{{ static 'FailuresStrategicThinking/flow_chart_s4.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 == 4 }}(works the same as in previous stage)
                    {{endif}}</h5>
                <div class="card-text">
                    {{ include C.BONUS2_TEMPLATE }}
                </div>
            </div>
            <br>
            <p>
                When you are ready, click the "Next" button.
            </p>
            <button style="float: right" class="btn btn-primary btn-large">Next</button>
        </div>
    </div>
</div>


{% 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 %}