{{ block content }}

<h4>Part II - Practice Round {{ player.round_number }} of 3 - Set ({{ counter }} of 5)</h4>
    <p>  </p> <p>  </p>

    <div style="width: 50%; height:600px; float: left; border-width:1.5px;border-style:solid;margin-top:20px;font-size:15px;padding:15px;border-radius:15px;">
        <div id="Your strategy">
            <div style="height:150px">
                <h6>Your chosen plan-of-action</h6>
                <p> </p> <p> </p>
                <span style="font-weight: 550">Plan-of-action:</span> {{ description_strategy }}
            </div>

            <div style="height:210px">
                <span style="font-weight: 550;">Instruction Diagram:</span>
                <p> </p> <p> </p>
                <img src="{{ static image_strategy }}" width="423" height="235"/>
            </div>
        </div>
    </div>


    <div style="width: 50%; height:600px; float: right; margin-top:60px;font-size:15px;padding:15px;border-radius:15px;">
        {## DIV SECTION 1 - Initial "choose" instruction#}
        <div style="height: 60px">
            <div id="initialChoice", style="display: block; height:60px">
                <p>
                    This is the start of the set. Please choose your first action.
                </p>
            </div>
            <div id="subsequentChoice", style="display: none; height:60px">
                <p>
                    So far <span id="turn_number">ERROR_MESSAGE</span> been played.
                    Please choose your next action.
                </p>
            </div>
            <div id="noChoice", style="display: none; height:60px">
                <p>
                    The set has ended.
                </p>
            </div>
        </div>

        {## DIV SECTION 2 - Histories #}
        <div style="height:150px">
            <table class = "table">
                <tr>
                    <th style="width: 95px">Player</th>
                    <th>History</th>
                </tr>
                <tr>
                    <td>Me</td>
                    <td> <i><span id="default_player">No action has been chosen yet</span></i> <span id="history_player" style="font-family: 'Courier New'; letter-spacing: 3px; font-size:16px; color: blue; font-weight: bold"></span> </td>
                </tr>
                <tr>
                    <td>Counterpart</td>
                    <td> <i><span id="default_opponent">No action has been chosen yet</span></i> <span id="history_opponent" style="font-family: 'Courier New'; letter-spacing: 3px; font-size:16px; color: red; font-weight: bold"></span> </td>
                </tr>
            </table>
        </div>

        {## DIV SECTION 3 - Buttons. Includes two conditional blocks based on treatment type #}
        {## First conditional - cooperate and defect buttons for manual implementation #}
        <div id = "pleaseChoose", style="display: block; height: 50px">
            <label>Please choose:
                <button type="button" onclick="cooperate()">
                    A
                </button>
                <button type="button" onclick="defect()">
                    B
                </button>
            </label>
        </div>

        <div id="gameEnd", style="display: none; height:50px">
            <p> The set has concluded. In total <span id="turn_number_end">ERROR_MESSAGE</span> been played in this set.
            </p>
        </div>

        {## DIV SECTION 4 - space for error messages #}
        <div id="errorFalse", style="display: block; height:60px">
        </div>

        <div id="errorTrue", style="display: none; height:60px">
            <p>
                An error has occurred that changed your last action.
            </p>
        </div>

        <div id = "gameEndNext", style="display: none; height: 180px">
            <h6>Please click 'Next' when you are ready to proceed. </h6>
            <p> </p>
            {{ next_button }}
        </div>
    </div>

    <div id="empty_space", style="height: 650px">
    </div>

<script>

    {#Part 1 - Add functions for manual implementation#}
    function cooperate() {
        liveSend({'coop': true});
    }

    function defect() {
        liveSend({'coop': false});
    }

    addEventListener("keydown", function (event) {
        if (event.key === "a") {
            cooperate();
        }
    });

    addEventListener("keydown", function (event) {
        if (event.key === "b") {
            defect();
        }
    });

    {#Part 2 - Add functions for automatic implementation.#}
    function ChooseNextAction() {
        liveSend({'nextAction': true});
    }

    {## Part 3 - Add live receive functions#}
    function liveRecv(data){
        {# Update the histories and turn numbers #}
        history_player.innerText = data.history_player
        history_opponent.innerText = data.history_comput
        default_player.style.display = 'none'
        default_opponent.style.display = 'none'
        turn_number.innerText = data.turn_number
        turn_number_end.innerText = data.turn_number

        {## Change the initial choose text upon first information retrieval#}
        initialChoice.style.display = 'none'
        subsequentChoice.style.display = 'block'

        if (data.ind_error_player) {
            errorTrue.style.display = 'block'
            errorFalse.style.display = 'none'
        } else {
            errorTrue.style.display = 'none'
            errorFalse.style.display = 'block'
        }


        if (data.gameEnd) {
            gameEnd.style.display = 'block'
            gameEndNext.style.display = 'block'
            pleaseChoose.style.display = 'none'
            subsequentChoice.style.display = 'none'
            noChoice.style.display = 'block'
        }
    }

</script>

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