{% extends 'base.html.twig' %}

    {% block title %}{{ parent() }} - Game{% endblock %}
    {% block content %}
        <div id="game" class="box">

            <a href="{{ path('homepage_locale', {'_locale' : app.request.locale}) }}">{{ 'nav.home'|trans }}</a>
            <hr />

            <h2>{{ 'game.subtitle'|trans }}</h2>

            {% if game.iswon %}
            <div class="alert">
                <h3 class="alert alert-success text-center">{{ 'game.message.win'|trans }}</h3>
            </div>
            {% endif %}

            {% if game.ishanged %}
                <div class="alert">
                    <h3 class="alert alert-warning text-center">{{ 'game.message.lose'|trans }}</h3>
                </div>
            {% endif %}

            {% if not game.isover %}
            <p class="attempts">
                {{ 'game.attempts'|trans({'%attempts%' : remaining_attempts}) }}
            </p>
            {% endif %}

            <ul class="word-letters">
                {% for letter in word_letters %}
                <li class="not-guessed">{{ letter }}</li>
                {% endfor %}
            </ul>

            <p class="attempts">
                <a href="{{ path('game_reset') }}">{{ 'game.reset'|trans }}</a>
            </p>

            <br class="clearfix" />

            {% if not game.isover %}
            <h2>{{ 'game.try_letter'|trans }}</h2>

            <ul>
                {% for letter in letters %}
                <li class="letter btn">
                    <a href="{{ path('game_letter', {'letter' :letter}) }}">{{ letter|upper }}</a>
                </li>
                {% endfor %}
            </ul>

            <h2>{{ 'game.try_word'|trans }}</h2>

            <form action="{{ path('game_try_word') }}" method="post" class="form-inline">
                <div class="form-group">
                    <input name="word" class="form-control mb-2" placeholder="{{ 'game.placeholder.guess'|trans }}"/>
                </div>
                <button>{{ 'game.button.guess'|trans }}</button>
            </form>

            {% endif %}
        </div>
        <div class="box">
            {{ render(controller('AppBundle:Testimonials:index')) }}
        </div>
    {% endblock %}