{% 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 left, #1e2329 0%, #0b0e11 100%);">
    <div class="auth-card glass-card p-5" style="width: 100%; max-width: 500px; border-radius: 16px;">
        <div class="text-center mb-5">
            <h2 class="fw-bold text-white">注册 {{ site_settings.site_name }} 账户</h2>
            <p class="text-secondary">开启您的加密资产财富之旅</p>
        </div>
        
        {% if messages %}
        <div class="messages">
            {% for message in messages %}
            <div class="alert alert-danger alert-dismissible fade show bg-transparent text-danger border-danger" role="alert">
                {{ message }}
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            {% endfor %}
        </div>
        {% endif %}

        <form method="post">
            {% csrf_token %}
            <div class="mb-4">
                <label class="form-label text-secondary small fw-bold">用户名</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        <i class="bi bi-person"></i>
                    </span>
                    <input type="text" name="username" class="form-control bg-transparent text-white border-secondary" placeholder="请输入用户名" required>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label text-secondary small fw-bold">密码</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        <i class="bi bi-lock"></i>
                    </span>
                    <input type="password" name="password" class="form-control bg-transparent text-white border-secondary" placeholder="请输入密码" required>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label text-secondary small fw-bold">确认密码</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        <i class="bi bi-lock-fill"></i>
                    </span>
                    <input type="password" name="password_confirm" class="form-control bg-transparent text-white border-secondary" placeholder="请再次输入密码" required>
                </div>
            </div>

            <div class="mb-4">
                <label class="form-label text-secondary small fw-bold">安全验证 ({{ captcha_text }})</label>
                <div class="input-group">
                    <span class="input-group-text bg-transparent border-secondary text-secondary">
                        <i class="bi bi-shield-check"></i>
                    </span>
                    <input type="text" name="captcha_input" class="form-control bg-transparent text-white border-secondary" placeholder="请输入计算结果" required>
                </div>
            </div>
            
            <div class="mb-4">
                <div class="form-check">
                    <input class="form-check-input bg-transparent border-secondary" type="checkbox" id="terms" required checked>
                    <label class="form-check-label text-secondary small" for="terms">
                        我已阅读并同意 <a href="{% url 'core:placeholder' '服务条款' %}" class="text-warning">服务条款</a> 和 <a href="{% url 'core:placeholder' '隐私政策' %}" class="text-warning">隐私政策</a>
                    </label>
                </div>
            </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:login' %}" class="text-warning text-decoration-none fw-bold">立即登录</a></p>
        </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);
    }
</style>
{% endblock %}
