{{ block title }}
    Section 1 of 3
{{ endblock }}

{{ block content }}

<style>

    #ttt-board td {
        width: 4em;
        height: 4em;
        text-align: center;
        font-size: large;
        border: 1px solid black;
    }

    #ttt-board {
        width: auto;
        text-align: center;
    }

</style>
<div class="card">
  <div class="card-body">
    <h5>
        <div id="round">

        </div>
    </h5>
    <p></p>
    <div id="status">

    </div>
  </div>
</div>
<p></p>
<button class="otree-btn-next btn btn-primary" id="Next" style="visibility: hidden;"> >> </button>
<table id="ttt-board" style="visibility: visible;">
    <tr>
        <td id="square0" data-square="0" onclick="sendMove(0,{{ player.value_0 }})"></td>
        <td id="square1" data-square="1" onclick="sendMove(1,{{ player.value_1 }})"></td>
        <td id="square2" data-square="2" onclick="sendMove(2,{{ player.value_2 }})"></td>
        <td id="square3" data-square="3" onclick="sendMove(3,{{ player.value_3 }})"></td>
    </tr>
    <tr>
        <td id="square4" data-square="4" onclick="sendMove(4,{{ player.value_4 }})"></td>
        <td id="square5" data-square="5" onclick="sendMove(5,{{ player.value_5 }})"></td>
        <td id="square6" data-square="6" onclick="sendMove(6,{{ player.value_6 }})"></td>
        <td id="square7" data-square="7" onclick="sendMove(7,{{ player.value_7 }})"></td>
    </tr>
    <tr>
        <td id="square8" data-square="8" onclick="sendMove(8,{{ player.value_8 }})"></td>
        <td id="square9" data-square="9" onclick="sendMove(9,{{ player.value_9 }})"></td>
        <td id="square10" data-square="10" onclick="sendMove(10,{{ player.value_10 }})"></td>
        <td id="square11" data-square="11" onclick="sendMove(11,{{ player.value_11 }})"></td>
    </tr>
    <tr>
        <td id="square12" data-square="12" onclick="sendMove(12,{{ player.value_12 }})"></td>
        <td id="square13" data-square="13" onclick="sendMove(13,{{ player.value_13 }})"></td>
        <td id="square14" data-square="14" onclick="sendMove(14,{{ player.value_14 }})"></td>
        <td id="square15" data-square="15" onclick="sendMove(15,{{ player.value_15 }})"></td>
    </tr>
</table>
<br>
<br>
<br>
<!-- Button trigger modal -->
<button type="button" onclick="liveSend('clicked-button')" class="btn btn-secondary" data-bs-toggle="modal" style="visibility: visible" id="Instructions" data-bs-target="#exampleModal">
  Review the instructions
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h3 class="modal-title" id="exampleModalLabel">Instructions</h3>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        {{ include C.INSTRUCTIONS_TEMPLATE }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>


<script>

    function writeStatus(msg) {
        document.getElementById('status').innerText = msg;
    }

    function writeRound(msg) {
        document.getElementById('round').innerText = msg;
    }

    function liveRecv(data) {
        let boardState = data.board_state;
        document.getElementById(`square${0}`).innerText = {'X': '{{ player.value_0 }}', ' ': '{{ player.value_0 }}'}[boardState[0]];
        document.getElementById(`square${1}`).innerText = {'X': '{{ player.value_1 }}', ' ': ' '}[boardState[1]];
        document.getElementById(`square${2}`).innerText = {'X': '{{ player.value_2 }}', ' ': ' '}[boardState[2]];
        document.getElementById(`square${3}`).innerText = {'X': '{{ player.value_3 }}', ' ': ' '}[boardState[3]];
        document.getElementById(`square${4}`).innerText = {'X': '{{ player.value_4 }}', ' ': ' '}[boardState[4]];
        document.getElementById(`square${5}`).innerText = {'X': '{{ player.value_5 }}', ' ': ' '}[boardState[5]];
        document.getElementById(`square${6}`).innerText = {'X': '{{ player.value_6 }}', ' ': ' '}[boardState[6]];
        document.getElementById(`square${7}`).innerText = {'X': '{{ player.value_7 }}', ' ': ' '}[boardState[7]];
        document.getElementById(`square${8}`).innerText = {'X': '{{ player.value_8 }}', ' ': ' '}[boardState[8]];
        document.getElementById(`square${9}`).innerText = {'X': '{{ player.value_9 }}', ' ': ' '}[boardState[9]];
        document.getElementById(`square${10}`).innerText = {'X': '{{ player.value_10 }}', ' ': ' '}[boardState[10]];
        document.getElementById(`square${11}`).innerText = {'X': '{{ player.value_11 }}', ' ': ' '}[boardState[11]];
        document.getElementById(`square${12}`).innerText = {'X': '{{ player.value_12 }}', ' ': ' '}[boardState[12]];
        document.getElementById(`square${13}`).innerText = {'X': '{{ player.value_13 }}', ' ': ' '}[boardState[13]];
        document.getElementById(`square${14}`).innerText = {'X': '{{ player.value_14 }}', ' ': ' '}[boardState[14]];
        document.getElementById(`square${15}`).innerText = {'X': '{{ player.value_15 }}', ' ': ' '}[boardState[15]];

        let decisions_remaining = data.decisions_remaining;
        if (data.round_complete) {
            button = document.getElementById("Next");
            button.style.visibility = "visible";
            table = document.getElementById("ttt-board");
            table.style.visibility = "hidden";
            writeRound('Task C');
            modbutton = document.getElementById("Instructions");
            modbutton.style.visibility = "hidden";
            if (data.all_rounds_complete) {
                writeStatus('Round {{ player.round_number }} of Task C is now over. You have completed Task C. Click next to proceed to Section 2.');
            } else {
                writeStatus('Round {{ player.round_number }} of Task C is now over. Click next to begin Round {{ next_round }}.');
            }
        } else {
            modbutton = document.getElementById("Instructions");
            modbutton.style.visibility = "visible";
            writeRound('Task C Round {{ player.round_number }} of {{ C.NUM_ROUNDS }}');
            if (data.first_turn) {
                writeStatus('You have {{ player.DECISION_TURNS }} of {{ player.DECISION_TURNS }} turns remaining in this round. Take your first turn by choosing any square.');
            } else {
                writeStatus('You have ' + decisions_remaining + ' of {{ player.DECISION_TURNS }} turns remaining in this round. Take your next turn by choosing any square.');
            }
        }
    }

    function sendMove(x,y) {
        liveSend({'move': x, 'value': y});
    }

    document.addEventListener("DOMContentLoaded", function (event) {
        liveSend({});
    });
</script>



{{ endblock }}