{% extends "base.html" %}

{% block title %}Iniciar Sesión - The Daily Feed{% endblock %}

{% block content %}
<div style="max-width: 450px; margin: 40px auto; padding: 30px; background: #f9f9f9; border-radius: 10px;">
    <h2 style="text-align: center; margin-bottom: 30px;">Iniciar Sesión</h2>

    <form method="post" action="{{ url_for('auth.login') }}">
        <div style="margin-bottom: 20px;">
            <label for="username" style="display: block; margin-bottom: 5px; font-weight: 500;">Usuario o Email</label>
            <input type="text" id="username" name="username" required value="{{ username or '' }}"
                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;">
        </div>

        <div style="margin-bottom: 30px;">
            <label for="password" style="display: block; margin-bottom: 5px; font-weight: 500;">Contraseña</label>
            <input type="password" id="password" name="password" required
                style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 14px;">
        </div>

        <button type="submit"
            style="width: 100%; padding: 12px; background: #6c63ff; color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: 600; cursor: pointer;">
            Iniciar sesión
        </button>
    </form>

    <div style="text-align: center; margin-top: 20px;">
        <p style="color: #666;">¿No tienes cuenta? <a href="{{ url_for('auth.register') }}"
                style="color: #6c63ff; text-decoration: none; font-weight: 500;">Regístrate</a></p>
    </div>
</div>
{% endblock %}