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

{% block body %}
    <header class="header-login">
        <h1 class="text-3xl">CGK Leerdam - rooster streamen</h1>
    </header>

    <div class="flex justify-center items-center h-screen">
        <div id="login_card">
            <div class="flash-message">
                {% if error %}
                    <div class="alert alert-error">{{ error.messageKey|trans(error.messageData, 'security') }}</div>
                {% endif %}
            </div>

            <form class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4" action="{{ path('app_login') }}" method="post">
                <div class="mb-4">
                    <label class="block text-gray-700 font-bold mb-2" for="token">
                        {{ 'Please enter your token here.'|trans }}
                    </label>
                    <input class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" id="token" name="token" type="password" placeholder="Token">
                </div>
                <div class="flex items-center justify-between">
                    <button class="submit-button" type="submit">
                        Login
                    </button>
                </div>

                <div class="text-gray-700 pt-6">
                    {{ 'Or'|trans }} <a href="{{ path('app_roster_view_anon') }}" class="font-bold hover:text-blue-200 underline">
                        {{ 'checkout the roster directly'|trans }}
                    </a>
                </div>
            </form>
        </div>
    </div>
{% endblock %}