{% include "layout.html" %}
{% block body %}
    <a href="{{ url_for('home') }}">home</a>
    <hr>
    <ul>
        {% for guess in guesses %}
            {% if not loop.last %}
                {% include "_guess_line.html" %}
            {% else %}
                <form method="post" action="{{ url_for('add_hint') }}">
                <input type="hidden" name="guess" value="{{ guess }}">
                <table>
                <tr>
                    {% for letter, color in guess %}
                        <td>
                            <span class="letter" style="color:{{ color }};">{{ letter|upper }}</span>
                        </td>
                    {% endfor %}
                </tr>
                {% for color in colors %}
                    <tr>
                        {% for idx in range(WORD_LENGTH) %}
                            <td>
                                {% if guesses|length >= 2 and guesses[-1][idx][1] == colors[-1] %}
                                    <input type="hidden" name="guess-letter-{{ idx }}" value="{{ colors[-1] }}">
                                {% else %}
                                    <label style="background-color:{{ color }};
                                            display: inline-block; height:30px; width:20px;"> </label>
                                    <input style="position: relative; left: -38px; top: -10px;"
                                           {% if color == colors[0] %}checked="checked"{% endif %}
                                           type="radio" name="guess-letter-{{ idx }}" value="{{ color }}">
                                {% endif %}

                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            {% endif %}
        {% endfor %}

        </table>
        <input type="submit">
        </form>
    </ul>
    {% if state_playing %}
        <form method="post" action="{{ url_for('make_guess') }}">
            <input maxlength="{{ WORD_LENGTH }}" minlength="{{ WORD_LENGTH }}" size="{{ WORD_LENGTH }}"
                   name="{{ KEY_GUESS }}" autofocus autocomplete="off"
                   style="text-transform:uppercase"/>
            <input type="submit">
        </form>
    {% else %}
        <p>{{ state }}</p>
    {% endif %}
{% endblock %}