{% extends "base.twig" %}

{% block title %}Login{% endblock %}

{% block content %}
<div class="flex items-center justify-center ">
    <div class="relative my-40 bg-white p-6 rounded shadow md:w-1/4">
        <form action="{{ base_path }}/login" method="POST">
            <h1 class="text-xl font-bold mb-4">Login</h1>
            <div class="mb-4">
                <label for="username" class="block text-sm font-medium">Usuario</label>
                <input type="text" id="username" name="username" class="w-full mt-4 py-2.5 px-5 border-solid border-2 border-gray-300 rounded focus:ring focus:ring-blue-300">
            </div>
            <div class="mb-4">
                <label for="password" class="block text-sm font-medium">Contraseña</label>
                <input type="password" id="password" name="password" class="w-full mt-4 py-2.5 px-5 border-solid border-2 border-gray-300 rounded focus:ring focus:ring-blue-300">
            </div>
            <button type="submit" class="w-full bg-blue-500 text-white py-2 rounded hover:bg-blue-600">Entrar</button>
            {% if error %}
            <p class="text-red-500 mt-4">{{ error }}</p>
            {% endif %}
        </form>
    </div>
</div>
{% endblock %}