{% extends 'base.html' %}
{% load i18n %}

{% block title %}Login - RaktaPulse{% endblock %}

{% block content %}
<div class="row justify-content-center align-items-center py-5" style="min-height: 80vh;">
    <div class="col-md-5">
        <div class="glass-card shadow-lg border-0 p-4 p-md-5" style="border-top: 5px solid #E63946 !important;">
            <div class="text-center mb-5">
                <div class="d-inline-flex align-items-center justify-content-center mb-4" style="width: 60px; height: 60px; background: #fff5f5; border-radius: 12px;">
                    <i class="bi bi-shield-lock text-danger fs-2"></i>
                </div>
                <h2 class="fw-bold text-dark brand-font mb-2">{% trans "System Login" %}</h2>
                <p class="text-secondary small">{% trans "Secure access for registered members" %}</p>
            </div>
            
            {% if form.non_field_errors %}
            <div class="alert alert-danger border-0 rounded-3 mb-4 small">
                {% for error in form.non_field_errors %}
                <div class="d-flex align-items-center">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>
                    {{ error }}
                </div>
                {% endfor %}
            </div>
            {% endif %}

            <form method="post" class="needs-validation">
                {% csrf_token %}
                {% for field in form %}
                <div class="mb-4">
                    <label class="form-label small fw-bold text-secondary text-uppercase mb-2" for="{{ field.id_for_label }}">
                        <i class="bi bi-{% if 'username' in field.name %}person{% else %}key{% endif %} me-1"></i> {{ field.label }}
                    </label>
                    {{ field }}
                    {% if field.errors %}
                    <div class="text-danger small mt-1">
                        {% for error in field.errors %}{{ error }}{% endfor %}
                    </div>
                    {% endif %}
                </div>
                {% endfor %}
                
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="rememberMe">
                        <label class="form-check-label small text-secondary" for="rememberMe">Remember me</label>
                    </div>
                    <a href="#" class="text-danger small text-decoration-none fw-500">Forgot password?</a>
                </div>

                <button type="submit" class="btn btn-danger w-100 py-3 fw-bold mt-2 shadow-sm" style="background-color: #E63946; border: none; border-radius: 8px;">
                    {% trans "LOG IN" %} <i class="bi bi-arrow-right-short ms-1"></i>
                </button>
            </form>
            
            <div class="text-center mt-5">
                <p class="text-secondary small mb-4">Don't have an account? <a href="{% url 'register' %}" class="text-danger fw-bold text-decoration-none">Create one now</a></p>
                <hr class="opacity-10 mb-4">
                <a href="{% url 'home' %}" class="btn btn-link btn-sm text-secondary text-decoration-none">
                    <i class="bi bi-house-door me-1"></i> Back to Home
                </a>
            </div>
        </div>
    </div>
</div>

<style>
    input:not([type="checkbox"]) {
        display: block;
        width: 100%;
        padding: 0.85rem 1.25rem;
        font-size: 1rem;
        font-weight: 400;
        line-height: 1.5;
        color: #2b2d42;
        background-color: #ffffff;
        background-clip: padding-box;
        border: 1px solid #e9ecef;
        border-radius: 12px;
        transition: all 0.2s ease-in-out;
    }
    input:not([type="checkbox"]):focus {
        border-color: #E63946;
        outline: 0;
        box-shadow: 0 0 0 4px rgba(230, 57, 70, 0.08);
        background-color: #fff;
    }
    .glass-card {
        background: #ffffff;
        border-radius: 24px;
        border: 1px solid rgba(0,0,0,0.05);
    }
    .fw-500 { font-weight: 500; }
    .shadow-danger {
        box-shadow: 0 10px 20px rgba(230, 57, 70, 0.2);
    }
</style>
{% endblock %}