{% extends 'cwa/base.html.j2' %}

{%- block body %}
    <h1>Sudoku: {{ game.human_id }} (<span id="game-timer">{{ duration }}</span>)</h1>
    <main>
      <form method="POST">
        <div id="sudoku-field">
          <table>
            {%- for row in range(1, 10) %}
            <tr class="{{ loop.cycle('odd', 'even') }} row-{{ row }}">
              {%- for col in range(1, 10) %}
              <td class="{{ loop.cycle('odd', 'even') }} col-{{ col }}">
                {%- if puzzle.original[row-1][col-1] %}
                <label class="sudoku-field sudoku-field-original">
                  {{ puzzle.grid[row-1][col-1] | default('', true) }}
                </label>
                {%- else %}
                <input type="radio" id="sudoku-field-{{ row }}{{ col }}" name="sudoku-field" value="{{ row }}{{ col }}" class="sudoku-field"/>
                <label for="sudoku-field-{{ row }}{{ col }}" id="sudoku-field-{{ row }}{{ col }}-label" class="sudoku-field">
                  {{ puzzle.grid[row-1][col-1] | default('', true) }}
                </label>
                {%- endif %}
              </td>
              {%- endfor %}
            </tr>
            {%- endfor %}
          </table>
        </div>
        <div id="sudoku-input">
          <table>
            {%- for row in range(0, 3) %}
            <tr>
              {%- for col in range(1, 4) %}
              <td>
                <input type="submit" value="{{ row * 3 + col }}" name="number" />
              </td>
              {%- endfor %}
            </tr>
            {%- endfor %}
            <tr>
              <td colspan="3">
                <input type="submit" value="Delete" name="number" class="fill" />
              </td>
            </tr>
          </table>
        </div>
      </form>
    </main>
    <h2>Players in Game</h2>
    <ul>
      {%- for pkey in game.players.keys() %}
      <li>
        <b>{{ game.players[pkey].name }}</b>
        (Progress: {{ (game.puzzle.puzzles[pkey].progress * 100) | int }} %)
      </li>
      {%- endfor %}
    </ul>
    <h2>Scores</h2>
    <ol>
      {%- for score in game.scoreboard %}
      <li>
        <b>{{ game.players[score['player']].name }}</b>
        {{ score['duration'] }}
      </li>
      {%- endfor %}
    </ol>
    <a href="{{ baseurl }}/{{ player.uuid }}/{{ game.uuid }}/play">Refresh</a>
{%- endblock %}