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

{% block content %}
<div class="auth-container d-flex align-items-center justify-content-center" style="min-height: 90vh; background: radial-gradient(circle at top right, #1e2329 0%, #0b0e11 100%);">
    <div class="auth-card glass-card p-5" style="width: 100%; max-width: 450px; border-radius: 16px;">
        <div class="text-center mb-5">
            <div class="logo-circle mb-4 mx-auto">
                <i class="bi bi-hexagon-fill text-warning display-4"></i>
            </div>
            <h2 class="fw-bold text-white">欢迎登录 BitCrypto</h2>
            <p class="text-secondary">全球领先的加密资产交易平台</p>
        </div>
        
        <form method="post">
            {% csrf_token %}
            {% for field in form %}
            <div class="mb-4">
                <label class="form-label text-secondary small fw-bold">{{ field.label }}</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        {% if '用户' in field.label %}<i class="bi bi-person"></i>{% else %}<i class="bi bi-lock"></i>{% endif %}
                    </span>
                    <input type="{{ field.field.widget.input_type }}" name="{{ field.name }}" class="form-control bg-transparent text-white border-secondary" placeholder="请输入{{ field.label }}" required>
                </div>
                {% for error in field.errors %}
                <div class="text-danger x-small mt-1">{{ error }}</div>
                {% endfor %}
            </div>
            {% endfor %}
            
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div class="form-check">
                    <input class="form-check-input bg-transparent border-secondary" type="checkbox" id="remember">
                    <label class="form-check-label text-secondary small" for="remember">自动登录</label>
                </div>
                <a href="#" class="text-warning small text-decoration-none">忘记密码?</a>
            </div>
            
            <button type="submit" class="btn btn-warning w-100 py-3 fw-bold shadow-lg mb-4">登录</button>
        </form>

        <div class="text-center">
            <p class="text-secondary small">还没有账户? <a href="{% url 'core:register' %}" class="text-warning text-decoration-none fw-bold">立即注册</a></p>
        </div>

        <div class="mt-5 pt-4 border-top border-secondary text-center">
            <p class="text-secondary x-small mb-3">其他登录方式</p>
            <div class="d-flex justify-content-center gap-4">
                <a href="#" class="text-secondary fs-4"><i class="bi bi-google"></i></a>
                <a href="#" class="text-secondary fs-4"><i class="bi bi-apple"></i></a>
                <a href="#" class="text-secondary fs-4"><i class="bi bi-qr-code-scan"></i></a>
            </div>
        </div>
    </div>
</div>

<style>
    .auth-card {
        border: 1px solid rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
    }
    .input-group-text {
        border-right: none;
    }
    input.form-control {
        border-left: none;
        padding: 12px;
    }
    input.form-control:focus {
        background: rgba(255, 255, 255, 0.05) !important;
        box-shadow: none;
        border-color: var(--accent-color);
    }
    .x-small { font-size: 11px; }
    .logo-circle {
        width: 80px;
        height: 80px;
        background: rgba(240, 185, 11, 0.1);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>
{% endblock %}