<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sudoku</title>
    <link rel="stylesheet" type="text/css" href="/static/style.css" />
  </head>
  <body>
    <main>
      <form method="POST" action="/">
        <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 sudoku_original[row-1][col-1] %}
                      <label class="sudoku-field sudoku-field-original">
                        {{ sudoku_fields[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">
                      {{ sudoku_fields[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>
  </body>
</html>