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

{% block body %}
        <div class="w-full h-screen flex flex-col items-center justify-center px-4">
            <div class="w-full max-w-md p-8 bg-gray-100 border border-gray-200 rounded-md">
                <h1 class="flex items-center justify-between mb-6">
                    <span class="text-3xl md:text-4xl leading-none font-bold text-gray-900">MyE&amp;P Team</span>
                    <img class="h-10 w-auto" src="{{ asset('build/images/logo.svg') }}" alt="My E&amp;P Team">
                </h1>
                {% if error %}
                    <div class="flex items-center space-x-1 bg-red-500 text-white p-2 rounded-md mb-6">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                        </svg>
                        <span class="flex-1 text-sm">{{ error.messageKey|trans(error.messageData, 'security') }}</span>
                    </div>
                {% endif %}
                <form action="{{ path('app_security_login') }}" method="post">
                    <div class="mb-6">
                        <label for="username" class="block leading-6 text-gray-900">
                            E-Mail:
                        </label>
                        <input type="email"
                               id="username"
                               name="_username"
                               value="{{ last_username }}"
                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                               required
                               autofocus
                               autocomplete="username">
                    </div>
                    <div class="mb-6">
                        <label for="password" class="block leading-6 text-gray-900">
                            Passwort:
                        </label>
                        <input type="password"
                               id="password"
                               name="_password"
                               class="mt-2 block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm sm:leading-6"
                               required
                               autocomplete="current-password">
                    </div>
                    <button type="submit" class="btn w-full">
                        Login
                    </button>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
                    {% if role is not null %}
                        <input type="hidden" name="_role" value="{{ role }}">
                    {% endif %}
                </form>
                <div class="pt-4">
                    <a href="{{ path('app_security_password_reset') }}" class="text-sm underline">
                        Passwort vergessen?
                    </a>
                </div>
            </div>
        </div>

{% endblock %}