{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
ミニゲーム
{% endblock %}

<style>
    .otree-timer {
        vertical-align: middle;
    }
</style>

{% block styles %}
<link rel="stylesheet" href="{% static 'tictactoe/main.css' %}" />
{% endblock %}

{% block scripts %}
<script src="{% static 'tictactoe/main.js' %}"></script>
{% endblock %}


{% block content %}

<div class="d-flex flex-row justify-content-center m-2 p-2">
    <div class="d-flex flex-column align-items-center border rounded shadow p-2" id="game">
        <h6>あなたは「{{player.symbol}}」です。</h6>
        <table>
            <tr>
                <td data-i=1></td>
                <td data-i=2></td>
                <td data-i=3></td>
            </tr>
            <tr>
                <td data-i=4></td>
                <td data-i=5></td>
                <td data-i=6></td>
            </tr>
            <tr>
                <td data-i=7></td>
                <td data-i=8></td>
                <td data-i=9></td>
            </tr>
        </table>
        <p id="turn"></p>
        <p id="status"></p>
    </div>
</div>
<p id="error" class="alert alert-warning hidden"></p>

<hr/>

{% next_button %}

{% endblock %}