{% extends "base_auth.html" %}
{% load static %}

{% block title %}登录 - AgomTradePro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/account.css' %}">
{% endblock %}

{% block content %}
<div class="login-page">
    <div class="login-card">
        <h1 class="login-title">AgomTradePro 登录</h1>
        <p class="login-subtitle">个人投研平台</p>

        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}">{{ message }}</div>
            {% endfor %}
        {% endif %}

        {% if not has_admin %}
        <div class="setup-wizard-banner">
            <div class="setup-icon">🚀</div>
            <h2>欢迎使用 AgomTradePro</h2>
            <p>检测到这是首次启动，请先完成系统初始化配置</p>
            <a href="/setup/" class="btn btn-setup">开始系统初始化</a>
        </div>
        <div class="setup-divider">
            <span>已有账号</span>
        </div>
        {% endif %}

        <form method="post" class="login-form" id="loginForm">
            {% csrf_token %}
            <div class="form-group">
                <label for="username">用户名</label>
                <input type="text" id="username" name="username" class="form-control" required autofocus>
            </div>
            <div class="form-group">
                <label for="password">密码</label>
                <input type="password" id="password" name="password" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary btn-block">登录</button>
        </form>

        <div class="login-footer">
            <p>还没有账号？ <a href="/account/register/">立即注册</a></p>
        </div>
    </div>
</div>

<style>
.login-page {
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.login-card {
    width: min(400px, 100%);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 40px;
    box-shadow: var(--shadow-lg);
}

.login-title {
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    color: var(--color-text-primary);
}

.login-subtitle {
    text-align: center;
    color: var(--color-text-secondary);
    margin-bottom: 32px;
}

.alert {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
    font-size: 14px;
}

.alert-error {
    background: #FEE7E7;
    color: #D33;
    border: 1px solid #F8B4B4;
}

.alert-success {
    background: #D5FBDD;
    color: #14866D;
    border: 1px solid #9FE5B8;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 14px;
    transition: border-color 0.2s;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(51, 102, 204, 0.1);
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-bg);
}

.btn-primary:hover {
    background: var(--color-primary-hover);
}

.btn-block {
    width: 100%;
}

.login-footer {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.login-footer a {
    color: var(--color-primary);
    text-decoration: none;
}

.login-footer a:hover {
    text-decoration: underline;
}

.setup-wizard-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-md);
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
    color: white;
}

.setup-wizard-banner h2 {
    font-size: 20px;
    font-weight: 600;
    margin: 12px 0 8px;
}

.setup-wizard-banner p {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 16px;
}

.setup-icon {
    font-size: 40px;
}

.btn-setup {
    display: inline-block;
    background: white;
    color: #667eea;
    padding: 12px 32px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-setup:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.setup-divider {
    text-align: center;
    margin: 20px 0;
    position: relative;
}

.setup-divider::before,
.setup-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background: var(--color-border);
}

.setup-divider::before {
    left: 0;
}

.setup-divider::after {
    right: 0;
}

.setup-divider span {
    background: var(--color-bg);
    padding: 0 12px;
    color: var(--color-text-secondary);
    font-size: 14px;
}
</style>

<script>
(function () {
    function getCookie(name) {
        const cookieStr = document.cookie || '';
        const cookies = cookieStr.split(';');
        for (let i = 0; i < cookies.length; i++) {
            const cookie = cookies[i].trim();
            if (cookie.startsWith(name + '=')) {
                return decodeURIComponent(cookie.substring(name.length + 1));
            }
        }
        return '';
    }

    const form = document.getElementById('loginForm');
    if (!form) return;

    form.addEventListener('submit', function () {
        const tokenInput = form.querySelector('input[name="csrfmiddlewaretoken"]');
        const cookieToken = getCookie('csrftoken');
        if (tokenInput && cookieToken) {
            tokenInput.value = cookieToken;
        }
    });
})();
</script>
{% endblock %}