{% extends "base.html" %}
{% block title %}Login{% endblock %}

{% block auth_content %}
<style>
    .auth-logo {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        margin-bottom: 0.75rem;
        flex-wrap: wrap;
    }
    .auth-brand {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.3;
        max-width: 20rem;
        text-align: center;
    }
    .auth-logo-icon {
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, var(--accent-primary), var(--accent-success));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>

<div class="auth-container">
    <div class="auth-card auth-card--narrow">
        <div class="auth-header">
            <div class="auth-logo">
                <div class="auth-logo-icon">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M9 2.5v3.5M12 1.5v4.5M15 2.5v3.5"/>
                        <circle cx="9" cy="2.5" r="1" fill="white" stroke="none"/>
                        <circle cx="12" cy="1.5" r="1" fill="white" stroke="none"/>
                        <circle cx="15" cy="2.5" r="1" fill="white" stroke="none"/>
                        <rect x="5" y="6" width="14" height="13" rx="3"/>
                        <path d="M5 11H3.5M19 11h1.5"/>
                        <circle cx="9.5" cy="11.5" r="1.15"/>
                        <circle cx="14.5" cy="11.5" r="1.15"/>
                        <path d="M8 16h1.5l1-2 1.5 3.5L14.5 15l1 1H16.5"/>
                    </svg>
                </div>
                <span class="auth-brand">Extensive Exposure Guard</span>
            </div>
            <p class="auth-subtitle">Sign in to your AI security platform</p>
        </div>

        {% if form.errors %}
        <div class="alert alert-error">
            Invalid username or password. Please try again.
        </div>
        {% endif %}

        {% if request.GET.account_deleted %}
        <div class="alert alert-success">
            Your account has been deleted.
        </div>
        {% endif %}

        <form method="post">
            {% csrf_token %}
            <div class="form-group">
                <label for="id_username">Username</label>
                <input type="text" name="username" id="id_username" class="eeg-input" autofocus required>
            </div>
            <div class="form-group">
                <label for="id_password">Password</label>
                <input type="password" name="password" id="id_password" class="eeg-input" required>
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%; justify-content: center;">
                Sign In
            </button>
        </form>

        <div class="auth-footer">
            <p>Don't have an account? <a href="{% url 'accounts:signup' %}">Create one</a></p>
        </div>
    </div>
</div>
{% endblock %}