{% extends "base.html" %}

{% block title %}注册 - DVS云盘{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-12">
    <div class="max-w-md mx-auto">
        <div class="mac-card mb-8">
            <div class="mac-card-header">
                <div class="flex items-center">
                    <i class="fas fa-user-plus mr-3"></i>
                    <h5 class="mb-0">注册账户</h5>
                </div>
            </div>
            <div class="p-6">
                {% with messages = get_flashed_messages(with_categories=true) %}
                    {% if messages %}
                        {% for category, message in messages %}
                            <div class="mac-alert mac-alert-{{ 'success' if category == 'success' else 'info' if category == 'info' else 'warning' if category == 'warning' else 'danger' }} mb-6">
                                <i class="fas fa-{{ 'check-circle' if category == 'success' else 'info-circle' if category == 'info' else 'exclamation-triangle' if category == 'warning' else 'times-circle' }}"></i>
                                <span>{{ message|safe }}</span>
                                <button type="button" class="mac-action-btn ml-auto" onclick="this.parentElement.remove()">
                                    <i class="fas fa-times"></i>
                                </button>
                            </div>
                        {% endfor %}
                    {% endif %}
                {% endwith %}
                
                <form method="POST" action="{{ url_for('register') }}">
                    <div class="mb-6">
                        <label for="username" class="block text-gray-700 mb-2 font-medium">
                            <i class="fas fa-user mr-2"></i>用户名
                        </label>
                        <input type="text" class="mac-input w-full" id="username" name="username" required 
                               placeholder="请输入用户名" minlength="3" maxlength="20">
                        <div class="text-gray-500 text-sm mt-2">用户名长度3-20个字符，支持字母、数字和下划线</div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="password" class="block text-gray-700 mb-2 font-medium">
                            <i class="fas fa-lock mr-2"></i>密码
                        </label>
                        <input type="password" class="mac-input w-full" id="password" name="password" required 
                               placeholder="请输入密码" minlength="6">
                        <div class="text-gray-500 text-sm mt-2">密码长度至少6个字符</div>
                    </div>
                    
                    <div class="mb-6">
                        <label for="confirm-password" class="block text-gray-700 mb-2 font-medium">
                            <i class="fas fa-lock mr-2"></i>确认密码
                        </label>
                        <input type="password" class="mac-input w-full" id="confirm-password" name="confirm-password" required 
                               placeholder="请再次输入密码">
                        <div class="text-gray-500 text-sm mt-2">请再次输入密码以确保一致性</div>
                    </div>
                    
                    <div class="mb-8">
                        <label for="invitation_code" class="block text-gray-700 mb-2 font-medium">
                            <i class="fas fa-key mr-2"></i>邀请码
                        </label>
                        <input type="text" class="mac-input w-full" id="invitation_code" name="invitation_code" required 
                               placeholder="请输入邀请码">
                        <div class="text-gray-500 text-sm mt-2">请联系管理员获取邀请码</div>
                    </div>
                    
                    <div class="mb-6">
                        <div class="flex items-center">
                            <input class="mac-checkbox mr-3" type="checkbox" id="agreeTerms" required>
                            <label class="text-gray-700 text-sm" for="agreeTerms">
                                我已阅读并同意
                                <a href="#" class="text-blue-500 hover:text-blue-600">服务条款</a>
                                和
                                <a href="#" class="text-blue-500 hover:text-blue-600">隐私政策</a>
                            </label>
                        </div>
                    </div>
                    
                    <div class="mb-6">
                        <button type="submit" class="mac-btn mac-btn-lg w-full">
                            <i class="fas fa-user-plus mr-2"></i>注册账户
                        </button>
                    </div>
                </form>
                
                <div class="border-t border-gray-200 pt-6 text-center">
                    <p class="text-gray-600 mb-0">
                        已有账户？ 
                        <a href="{{ url_for('login') }}" class="text-blue-500 font-medium hover:text-blue-600">
                            <i class="fas fa-sign-in-alt mr-1"></i>立即登录
                        </a>
                    </p>
                </div>
            </div>
        </div>
        
        <div class="mac-card">
            <div class="mac-card-header">
                <div class="flex items-center">
                    <i class="fas fa-crown text-yellow-500 mr-3"></i>
                    <h5 class="mb-0">VIP专属特权</h5>
                </div>
            </div>
            <div class="p-6">
                <div class="grid grid-cols-3 gap-6 text-center">
                    <div class="feature-item">
                        <div class="w-12 h-12 bg-blue-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-cloud-upload-alt text-blue-500 text-xl"></i>
                        </div>
                        <p class="text-sm font-medium text-gray-700">超大存储</p>
                    </div>
                    <div class="feature-item">
                        <div class="w-12 h-12 bg-green-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-bolt text-green-500 text-xl"></i>
                        </div>
                        <p class="text-sm font-medium text-gray-700">极速传输</p>
                    </div>
                    <div class="feature-item">
                        <div class="w-12 h-12 bg-red-100 rounded-2xl flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-shield-alt text-red-500 text-xl"></i>
                        </div>
                        <p class="text-sm font-medium text-gray-700">高级安全</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.feature-item {
    transition: transform 0.2s ease;
}
.feature-item:hover {
    transform: translateY(-2px);
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 密码确认验证
    const password = document.getElementById('password');
    const confirmPassword = document.getElementById('confirm-password');
    
    function validatePassword() {
        if (password.value !== confirmPassword.value) {
            confirmPassword.setCustomValidity('两次输入的密码不一致');
        } else {
            confirmPassword.setCustomValidity('');
        }
    }
    
    password.addEventListener('change', validatePassword);
    confirmPassword.addEventListener('keyup', validatePassword);
    
    // 用户名实时验证
    const username = document.getElementById('username');
    username.addEventListener('input', function() {
        const usernameRegex = /^[a-zA-Z0-9_]{3,20}$/;
        if (!usernameRegex.test(username.value)) {
            username.setCustomValidity('用户名只能包含字母、数字和下划线，长度3-20位');
        } else {
            username.setCustomValidity('');
        }
    });
    
    // 表单提交前的最终验证
    document.querySelector('form').addEventListener('submit', function(e) {
        validatePassword();
        
        if (!document.getElementById('agreeTerms').checked) {
            e.preventDefault();
            alert('请同意服务条款和隐私政策');
            return false;
        }
    });
});
</script>
{% endblock %}