<!-- extends base.html -->
{% extends "base.html" %} {% block content %}
<main>
  <div class="row h-100">
    <div class="col-3 rounded p-5">
      <div class="row">
        <div class="col-12">
          <h1 class="text-center">Settings</h1>
        </div>
        <!-- game type -->
        <hr class="col-12 bg-secondary" />
        <div class="col-12">
          <p class="display-6">Game type</p>
        </div>
        <a href="/set_board/american" class="col-12 btn btn-custom mt-3"
          >American (8x8)</a
        >
        <a href="/set_board/standard" class="col-12 btn btn-custom mt-3"
          >Standard (10x10)</a
        >
        <a href="#" class="col-12 btn btn-custom mt-3 disabled"
          >Your own board . . .</a
        >
        <!-- game settings -->
        <hr class="col-12 bg-secondary" />
        <div class="col-12">
          <p class="display-6">Game control</p>
        </div>
        <button id="makeMove" class="col-12 btn btn-custom mt-3">
          Make engine move
        </button>

        <button id="popBtn" class="col-12 btn btn-custom mt-3">Undo</button>
        <button id="randomPos" class="col-12 btn btn-custom mt-3">
          Set random position
        </button>
        <button id="copyFen" class="col-12 btn btn-custom mt-3">
          Copy FEN <small>to clipboard</small>
        </button>
        <button id="autoPlay" class="col-12 btn btn-custom mt-3">
          Auto play
        </button>
      </div>
    </div>
    <div class="col-6 h-100">
      <div
        id="board"
        class="board"
        crown_icon="{{ url_for('static', path='img/crown-icon.svg') }}"
      >
        {% for i in range(size) %}
        <div class="tile" id="tile-{{ i }}" tile-number="{{ i }}">
          <p id="tile-{{ i }}-text" class="tile-text"></p>
        </div>
        {% endfor %}
      </div>
    </div>
    <div class="col-2 pl-5 pr-0 pb-5 pt-5 rounded">
      <div class="row">
        <div class="col-12">
          <h1 class="text-center">Game info</h1>
        </div>
        <hr class="col-12 bg-secondary" />

        <div class="col-12">
          <p class="display-6">Turn: <code id="turn">White</code></p>
        </div>
        <div class="col-12">
          <p class="display-6">Move history</p>
          <table class="table m-0">
            <thead>
              <tr>
                <th scope="col">Nr</th>
                <th scope="col">White</th>
                <th scope="col">Black</th>
              </tr>
            </thead>
          </table>

          <div id="historyContainer" class="history-container m-0">
            <table class="table">
              <tbody id="historyTableBody"></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>
{% endblock %}
