{% extends "Base.html" %}

{% block content %}
{% if user.is_authenticated %}

{% else %}
<style>
    body {
        background: #2c2f36; /* Color de fondo oscuro */
        color: #fff; /* Texto en blanco para contraste */
    }
    .card {
        background-color: #ffffff; /* Fondo blanco para el formulario */
        border-radius: 12px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .card-body {
        padding: 30px;
    }
    .form-label {
        color: #333; /* Color de las etiquetas */
    }
    .btn-primary {
        background-color: #007bff; /* Botón azul */
        border-color: #007bff;
    }
    .btn-primary:hover {
        background-color: #0056b3; /* Color al pasar el ratón */
        border-color: #0056b3;
    }
    .alert {
        background-color: #f8d7da; /* Fondo rojo suave para los errores */
        border-color: #f5c6cb;
    }
    .alert p {
        margin-bottom: 0;
    }
</style>
<div class="container-fluid p-0" style="height: 100vh; background-color: #2c2f36;">
    <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
        <div class="card shadow-lg p-4" style="max-width: 400px; border-radius: 12px; background-color: #ffffff;">
            <div class="card-body">
                <h3 class="text-center mb-4" style="color: #333;">Iniciar Sesión</h3>

                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label for="username" class="form-label" style="color: #333;">Nombre de Usuario</label>
                        <input type="text" class="form-control" id="username" name="username" required
                            style="border-radius: 10px; box-shadow: none; transition: all 0.3s ease;">
                    </div>

                    <div class="mb-3">
                        <label for="password" class="form-label" style="color: #333;">Contraseña</label>
                        <input type="password" class="form-control" id="password" name="password" required
                            style="border-radius: 10px; box-shadow: none; transition: all 0.3s ease;">
                    </div>

                    <button type="submit" class="btn btn-dark w-100" style="border-radius: 10px; font-size: 16px; letter-spacing: 1px;">
                        Iniciar Sesión
                    </button>
                </form>
                <div class="text-center mt-3">
                    <a href="{% url 'signup' %}" class="text-muted" style="font-size: 14px;">Registrar</a>
                </div>
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock  %}
{% block footer %}
    <footer class="footer mt-auto py-3 bg-dark text-white">
        <div class="container">
            <span class="text-muted">© 2024 Mi Aplicación. Todos los derechos reservados.</span>
        </div>
    </footer>
{% endblock %}