{% extends "base.html" %}
{% block content %}
<div class="container py-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6 animate-up">
            <div class="glass-card p-4">
                <div class="text-center mb-5">
                    <div class="bg-primary bg-opacity-10 rounded-circle d-inline-block p-4 mb-3">
                        <i class="bi bi-person-badge text-primary fs-1"></i>
                    </div>
                    <h3 class="fw-bold">身份验证 (KYC)</h3>
                    <p class="text-secondary">为确保您的账户安全并提高提现额度，请完成身份验证。</p>
                </div>

                {% if account.kyc_status == 'UNVERIFIED' %}
                <div class="row g-4 mb-4">
                    <div class="col-6">
                        <div class="p-3 border border-secondary border-opacity-25 rounded-3 text-center">
                            <i class="bi bi-person-vcard fs-2 text-secondary d-block mb-2"></i>
                            <span class="small fw-bold text-white">L1 基础认证</span>
                            <p class="text-secondary x-small mt-2 mb-0">提现额度: 20k USDT/日</p>
                        </div>
                    </div>
                    <div class="col-6">
                        <div class="p-3 border border-warning border-opacity-50 rounded-3 text-center bg-warning bg-opacity-5">
                            <i class="bi bi-shield-check fs-2 text-warning d-block mb-2"></i>
                            <span class="small fw-bold text-white">L2 高级认证</span>
                            <p class="text-secondary x-small mt-2 mb-0">提现额度: 无限制</p>
                        </div>
                    </div>
                </div>

                <form method="POST" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="mb-3">
                        <label class="form-label text-secondary">姓名</label>
                        <input type="text" class="form-control bg-dark text-white border-secondary border-opacity-25" placeholder="请输入您的真实姓名" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label text-secondary">证件类型</label>
                        <select class="form-select bg-dark text-white border-secondary border-opacity-25">
                            <option>身份证</option>
                            <option>护照</option>
                            <option>驾驶证</option>
                        </select>
                    </div>
                    <div class="mb-4">
                        <label class="form-label text-secondary">证件号码</label>
                        <input type="text" class="form-control bg-dark text-white border-secondary border-opacity-25" placeholder="请输入您的证件号码" required>
                    </div>
                    
                    <div class="row g-3 mb-4">
                        <div class="col-6">
                            <label class="form-label text-secondary small">证件正面</label>
                            <div class="border border-dashed border-secondary border-opacity-50 rounded p-4 text-center cursor-pointer" style="border-style: dashed !important;">
                                <i class="bi bi-plus-lg text-secondary"></i>
                            </div>
                        </div>
                        <div class="col-6">
                            <label class="form-label text-secondary small">证件反面</label>
                            <div class="border border-dashed border-secondary border-opacity-50 rounded p-4 text-center cursor-pointer" style="border-style: dashed !important;">
                                <i class="bi bi-plus-lg text-secondary"></i>
                            </div>
                        </div>
                    </div>

                    <button type="submit" class="btn btn-primary-custom w-100 py-3">提交认证</button>
                </form>
                {% elif account.kyc_status == 'PENDING' %}
                <div class="text-center py-5">
                    <div class="spinner-border text-warning mb-4" role="status"></div>
                    <h5 class="fw-bold">资料审核中</h5>
                    <p class="text-secondary">我们正在加速审核您的资料，预计需要 1-2 个工作日。</p>
                    <a href="/profile/" class="btn btn-outline-light mt-3">返回个人中心</a>
                </div>
                {% elif account.kyc_status == 'VERIFIED' %}
                <div class="text-center py-5">
                    <i class="bi bi-check-circle-fill text-success" style="font-size: 5rem;"></i>
                    <h4 class="fw-bold mt-4">认证已成功</h4>
                    <p class="text-secondary">您已完成身份验证，现在可以享受完整的功能服务。</p>
                    <a href="/profile/" class="btn btn-outline-light mt-3">返回个人中心</a>
                </div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
