{% extends "../base.html" %}

{% block head %}
    <script type="module" src="{{ fix_static('js/hangman_solver/hangman_solver.js') }}"></script>
{% end %}
{% block stylesheets %}
    <link rel="stylesheet" type="text/css"
          href="{{fix_static('css/form.css')}}">
{% end %}

{% block body %}
    <form id="hangman-solver-form">
        <label class="form-element">
            Eingabe (Nutze "_" für nicht bekannte Buchstaben)
            <input type="text"
                   name="input"
                   value="{{hangman_result.input}}">
        </label>

        <label class="form-element">
            Falsche Buchstaben
            <input type="text"
                   name="invalid"
                   value="{{''.join(hangman_result.invalid)}}">
        </label>

        <div class="form-element">
            <label tooltip="Die Buchstaben im Eingabefeld können auch an anderen Stellen erneut auftauchen."
                   tooltip-position="right">Kreuzworträtselmodus
                <input type="checkbox"
                       id="crossword-mode"
                       {% if data.crossword_mode %} checked {% end %}
                       name="crossword_mode">
            </label>
        </div>

        <div class="form-element">
            <label tooltip="Wie viele Wörter maximal angezeigt werden dürfen."
                   tooltip-position="right">Maximale Wortanzahl
                <input type="number"
                       id="max_words"
                       name="max_words"
                       min="0"
                       max="100"
                       step="1"
                       value="{{data.get_max_words()}}">
            </label>
        </div>

        <label class="form-element">
            Sprache der Wörter
            <select name="lang">
                <option {% if hangman_result.language.value == "de" %} selected {% end %}
                        value="de">Deutsch ohne Umlaute</option>
                <option {% if hangman_result.language.value == "de_umlauts" %} selected {% end %}
                        value="de_umlauts">Deutsch</option>
                <option {% if hangman_result.language.value == "de_basic" %} selected {% end %}
                        value="de_basic">Deutsch (Grundformen) ohne Umlaute</option>
                <option {% if hangman_result.language.value == "de_basic" %} selected {% end %}
                        value="de_basic_umlauts">Deutsch (Grundformen)</option>
                <option {% if hangman_result.language.value == "en" %} selected {% end %}
                        value="en">Englisch</option>
            </select>
        </label>

        {% raw form_appendix %}

        <input type="submit"
               id="submit"
               value="Eingabe">
    </form>

    <div id="letter-frequency-information">
        {% if hangman_result.matching_words_count > 0 %}
            Mögliche Buchstaben:
            {{ ", ".join([f"{char}: {count}" for char, count in hangman_result.letter_frequency]) }}
        {% else %}Nichts gefunden.{% end %}
    </div>

    <div id="matching-words">
        {% if hangman_result.matching_words_count > 0 %}
            {{min(hangman_result.matching_words_count, data.get_max_words())}}/{{hangman_result.matching_words_count}} passenden Wörter:
            <ul>{% for word in hangman_result.words %}<li>{{word}}</li>{% end %}</ul>
        {% end %}
    </div>

{% end %}
