{{ block content }}

<h4>Part III - Round {{ player.round_number }} of 6 - Start of the round </h4>
    <p>  </p> <p>  </p>

    <div>
        {{ if player.round_number == 1 }}
        <h6>Start of Part III</h6>
        <p>
            This is the start of <span style="font-weight: 550">Part III</span>.
            You will now play 6 full rounds.
            <u>Your payoffs will now count towards your total earnings</u>.
        </p>
        <p>
            In each full round you will have 5 potential matches (as opposed to 1 match in the practice rounds), choosing a plan-of-action for each.
            The interaction will then be 5 sets (same as the practice rounds) using one of the 5 potential matches selected at random.
        </p>
        <p>
            In <span style="font-weight: 550">Part III</span> you will be informed of your results after all 5 sets are finished, as opposed to after each individual set as in the practice rounds.
        </p>
        {{ endif }}
    </div>

    <div>
        {{ if not player.round_number == 1 }}
        <h6>Start of the round</h6>
        <p>
            This is the start of round {{ player.round_number }}.
        </p>

        <p>
            <span style="color: darkred; font-weight: 550">Please note the changed conditions for this round.</span>
        </p>
        {{ endif }}
    </div>

    <div style="height: 330px">
        <h5>Conditions for this round</h5>
        <h6>The opposing plan-of-action</h6>
        {{ if player.treatment_show }}
        <p>
            <span style="font-weight: 550">In this round</span>, your counterpart's plan-of-action <u>is provided to you</u> during the potential match.
            This means you will know how your counterpart will behave in the interaction, and you can choose a plan-of-action in response to this.
        </p>
        {{ endif }}

        {{ if not player.treatment_show }}
        <p>
            <span style="font-weight: 550">In this round</span>, your counterpart's plan-of-action <u style="font-weight: 550">will not</u> be provided to you.
        </p>
        {{ endif }}

        <h6>Implementing your plan-of-action</h6>
        {{ if player.treatment_manu }}
        <p>
            <span style="font-weight: 550">In this round</span>, you will be required to <u>implement your plan-of-action yourself</u>.
            This means in each set, you will be required to choose the correct action each game.
            If you make a mistake by choosing an action different from your plan-of-action, you will <u>receive a payoff of 0 points for that set</u> (the other sets in the interaction will remain unaffected).
        </p>
        {{ endif }}

        {{ if not player.treatment_manu }}
        <p>
            <span style="font-weight: 550">In this round</span>, your plan-of-action will be <u>implemented automatically</u>.
            This means in each set, you will choose your action each game by pressing a 'Next action' button that plays the next action as according to your plan-of-action.
        </p>
        {{ endif }}

    </div>


    <div style="height: 240px">
        <h6>Please click 'Next' when you are ready to proceed. </h6>
        <p>  </p> <p>  </p>
        {{ next_button }}
    </div>


    <div>
      {{ include Constants.PAYOFF_TABLE }}
    </div>

    <button type="button" class="collapsible">Instructions Page</button>
    <div class="content">
      {{ include Constants.INSTRUCTIONS_TEMPLATE }}
    </div>

<style>
    .collapsible {
        background-color: lightgray;
        color: black;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
        font-weight: 550;
    }

    .active, .collapsible:hover {
      background-color: grey;
    }

    .content {
      padding: 0 18px;
      display: none;
      overflow: hidden;
      background-color: #f1f1f1;
    }
</style>

<script>
    var coll = document.getElementsByClassName("collapsible");
    var i;

    for (i = 0; i < coll.length; i++) {
      coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
          content.style.display = "none";
        } else {
          content.style.display = "block";
        }
      });
    }
</script>



{{ endblock }}