{% load static %}
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ project_name }} - 全球领先的数字资产交易平台</title>
    <meta name="description" content="{{ project_description }}">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="{% static 'css/custom.css' %}?v={{ deployment_timestamp }}">
    <style>
        :root {
            --bg-dark: #0b0e11;
            --bg-card: #181a20;
            --text-primary: #eaecef;
            --text-secondary: #848e9c;
            --accent-color: #fcd535;
            --up-color: #0ecb81;
            --down-color: #f6465d;
        }
        body {
            background-color: var(--bg-dark);
            color: var(--text-primary);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .navbar {
            background-color: var(--bg-dark);
            border-bottom: 1px solid #2b2f36;
            padding: 0.75rem 1.5rem;
        }
        .nav-link {
            color: var(--text-primary) !important;
            font-weight: 500;
            font-size: 14px;
            margin: 0 8px;
            transition: color 0.2s;
        }
        .nav-link:hover { color: var(--accent-color) !important; }
        .btn-primary {
            background-color: var(--accent-color);
            border-color: var(--accent-color);
            color: #181a20;
            font-weight: 600;
            padding: 8px 20px;
            border-radius: 4px;
        }
        .footer {
            background-color: var(--bg-dark);
            padding: 60px 0 30px 0;
            border-top: 1px solid #2b2f36;
        }
        .footer h6 { color: #eaecef; margin-bottom: 20px; font-weight: 600; }
        .footer ul li { margin-bottom: 12px; }
        .footer ul li a { color: #848e9c; text-decoration: none; font-size: 14px; transition: color 0.2s; }
        .footer ul li a:hover { color: var(--accent-color); }
        .glass-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 12px;
        }
        /* Floating Customer Service Icon */
        .cs-float {
            position: fixed;
            right: 30px;
            bottom: 40px;
            width: 60px;
            height: 60px;
            background: var(--accent-color);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #181a20;
            font-size: 28px;
            box-shadow: 0 4px 20px rgba(252, 213, 53, 0.4);
            cursor: pointer;
            z-index: 9999;
            transition: all 0.3s;
            text-decoration: none;
        }
        .cs-float:hover {
            transform: scale(1.1) rotate(5deg);
            color: #181a20;
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg sticky-top">
        <div class="container-fluid">
            <a class="navbar-brand d-flex align-items-center" href="/">
                <img src="{% static 'images/logo.png' %}" alt="Logo" style="height: 28px; margin-right: 8px;">
                <span class="fw-bold fs-5 text-white">{{ project_name }}</span>
            </a>
            <button class="navbar-toggler border-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <i class="bi bi-list text-white"></i>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item"><a class="nav-link" href="{% url 'core:index' %}">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="{% url 'core:spot_trade' %}">现货交易</a></li>
                    <li class="nav-item"><a class="nav-link" href="{% url 'core:contract_trade' %}">合约交易</a></li>
                    <li class="nav-item"><a class="nav-link" href="{% url 'core:market_center' %}">行情中心</a></li>
                </ul>
                <div class="d-flex align-items-center">
                    {% if user.is_authenticated %}
                        <div class="dropdown">
                            <a class="nav-link dropdown-toggle d-flex align-items-center" href="#" role="button" data-bs-toggle="dropdown">
                                <i class="bi bi-person-circle fs-5 me-2"></i>
                                <span>{{ user.username }}</span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-dark dropdown-menu-end shadow">
                                <li><a class="dropdown-item" href="{% url 'core:profile' %}"><i class="bi bi-person-badge me-2"></i>个人中心</a></li>
                                <li><a class="dropdown-item" href="{% url 'core:profile' %}"><i class="bi bi-wallet2 me-2"></i>我的资产</a></li>
                                <li><hr class="dropdown-divider"></li>
                                <li><a class="dropdown-item text-danger" href="/login/"><i class="bi bi-box-arrow-right me-2"></i>安全退出</a></li>
                            </ul>
                        </div>
                    {% else %}
                        <a href="{% url 'core:login' %}" class="nav-link me-3">登录</a>
                        <a href="{% url 'core:register' %}" class="btn btn-primary">立即注册</a>
                    {% endif %}
                </div>
            </div>
        </div>
    </nav>

    <main>
        {% block content %}{% endblock %}
    </main>

    <!-- Floating CS -->
    {% if site_settings.customer_service_url %}
    <a href="{{ site_settings.customer_service_url }}" target="_blank" class="cs-float" title="在线客服">
        <i class="bi bi-headset"></i>
    </a>
    {% endif %}

    <footer class="footer">
        <div class="container">
            <div class="row g-4">
                <div class="col-md-3">
                    <h5 class="fw-bold mb-4 text-white">{{ project_name }}</h5>
                    <p class="text-secondary small">全球领先的数字资产交易平台，致力于为用户提供安全、专业、透明的数字资产一站式服务。</p>
                </div>
                <div class="col-md-2 offset-md-1">
                    <h6>产品服务</h6>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'core:spot_trade' %}">现货交易</a></li>
                        <li><a href="{% url 'core:contract_trade' %}">永续合约</a></li>
                        <li><a href="{% url 'core:placeholder' '币安赚币' %}">理财中心</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h6>法律法规</h6>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'core:placeholder' '服务条款' %}">服务条款</a></li>
                        <li><a href="{% url 'core:placeholder' '隐私政策' %}">隐私政策</a></li>
                        <li><a href="{% url 'core:placeholder' '免责声明' %}">免责声明</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h6>客户支持</h6>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'core:placeholder' '帮助中心' %}">帮助中心</a></li>
                        <li><a href="{% url 'core:placeholder' '公告中心' %}">公告中心</a></li>
                        <li><a href="{% url 'core:placeholder' '提交请求' %}">提交工单</a></li>
                    </ul>
                </div>
                <div class="col-md-2">
                    <h6>关于我们</h6>
                    <ul class="list-unstyled">
                        <li><a href="{% url 'core:placeholder' '公司简介' %}">公司简介</a></li>
                        <li><a href="{% url 'core:placeholder' '加入我们' %}">招贤纳士</a></li>
                    </ul>
                </div>
            </div>
            <hr class="my-5" style="border-color: #2b2f36;">
            <div class="row align-items-center">
                <div class="col-md-6 text-center text-md-start">
                    <p class="text-secondary small mb-0">&copy; 2026 {{ project_name }} Digital Asset Exchange. All rights reserved.</p>
                </div>
                <div class="col-md-6 text-center text-md-end mt-3 mt-md-0">
                    <div class="text-secondary small">
                        <i class="bi bi-globe me-2"></i> 简体中文 | USDT
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    {% block scripts %}{% endblock %}
</body>
</html>
