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

{% block content %}
    <div class="p-8 max-w-screen-sm border border-gray-300 rounded-md mx-auto">
        {% 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 %}
        <h2 class="text-2xl font-semibold pb-4">
            Login MyE&amp;P
        </h2>
        <form action="{{ path('app_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>
            <div class="flex items-start mb-6">
                <label for="rememberme" class="flex h-6 items-center">
                    <input type="checkbox" id="rememberme" name="_remember_me" class="h-4 w-4 rounded text-primary">
                    <span class="block ml-3 leading-6">angemeldet bleiben</span>
                </label>
            </div>
            <button type="submit" class="btn w-full">
                Login
            </button>
            <input type="hidden" name="_csrf_token" value="{{ csrf_token('authenticate') }}">
        </form>
    </div>
{% endblock %}