<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ZenthrexApi — Dashboard</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body class="dashboard-body">
    <div class="bg-particles" id="particles"></div>

    <!-- Navbar -->
    <nav class="navbar" id="navbar">
        <div class="container nav-container">
            <a href="dashboard" class="logo">
                <div class="logo-icon"><i class="fas fa-bolt"></i></div>
                <span class="logo-text">Zenthrex<span class="logo-accent">Api</span></span>
            </a>
            <ul class="nav-links" id="navLinks">
                <li><a href="dashboard" class="active" data-i18n="nav_dashboard">Dashboard</a></li>
                <li><a href="purchase" data-i18n="nav_buy">Buy Tokens</a></li>
                <li><a href="stats" data-i18n="nav_stats">Stats</a></li>
                <li><a href="docs" data-i18n="nav_docs">Docs</a></li>
            </ul>
            <div class="nav-actions">
                <div class="lang-switcher" id="langSwitcher">
                    <button class="lang-btn active" data-lang="en">EN</button>
                    <button class="lang-btn" data-lang="ru">RU</button>
                </div>
            </div>
            <button class="mobile-toggle" id="mobileToggle">
                <i class="fas fa-bars"></i>
            </button>
        </div>
    </nav>

    <!-- Dashboard -->
    <main class="dashboard-main">
        <!-- Background Image -->
        <div class="dash-bg-image"></div>

        <div class="container dash-layout">
            <!-- Left: Content -->
            <div class="dash-content">
                <div class="dash-header">
                    <h1 class="dash-title"><i class="fas fa-chart-line"></i> <span data-i18n="dash_title">Dashboard</span></h1>
                    <p class="dash-subtitle" data-i18n="dash_subtitle">Enter your API key to check balance and usage</p>
                </div>

                <!-- Key Input -->
                <div class="dash-input-section">
                    <div class="key-input-card tilt-card">
                        <div class="key-input-icon"><i class="fas fa-key"></i></div>
                        <h3 data-i18n="dash_enter_key">Enter API Key</h3>
                        <p data-i18n="dash_key_desc">Paste your ZenthrexApi key to check your balance</p>
                        <div class="key-input-group">
                            <div class="key-input-wrapper">
                                <i class="fas fa-lock"></i>
                                <input type="password" id="apiKeyInput" class="key-input" placeholder="sk-ant-api03-..." autocomplete="off">
                                <button class="key-toggle-vis" id="toggleKeyVis"><i class="fas fa-eye"></i></button>
                            </div>
                            <button class="btn btn-primary" id="checkKeyBtn" data-i18n="dash_check">Check Balance</button>
                        </div>
                        <div class="key-input-error" id="keyError"></div>
                    </div>
                </div>

                <!-- Balance Cards -->
                <div class="dash-balance-section" id="balanceSection" style="display: none;">
                    <div class="balance-grid">
                        <div class="balance-card tilt-card">
                            <div class="balance-card-icon"><i class="fas fa-coins"></i></div>
                            <div class="balance-card-label" data-i18n="dash_tokens_left">Tokens Remaining</div>
                            <div class="balance-card-value" id="tokensValue">—</div>
                            <div class="balance-card-bar">
                                <div class="balance-bar-fill" id="tokensBar" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="balance-card tilt-card">
                            <div class="balance-card-icon"><i class="fas fa-dollar-sign"></i></div>
                            <div class="balance-card-label" data-i18n="dash_dollars_left">Dollars Remaining</div>
                            <div class="balance-card-value" id="dollarsValue">—</div>
                            <div class="balance-card-bar">
                                <div class="balance-bar-fill dollars" id="dollarsBar" style="width: 0%"></div>
                            </div>
                        </div>
                        <div class="balance-card tilt-card">
                            <div class="balance-card-icon"><i class="fas fa-calendar"></i></div>
                            <div class="balance-card-label" data-i18n="dash_expires">Key Expires</div>
                            <div class="balance-card-value" id="expiresValue">—</div>
                        </div>
                        <div class="balance-card tilt-card">
                            <div class="balance-card-icon"><i class="fas fa-tag"></i></div>
                            <div class="balance-card-label" data-i18n="dash_plan">Current Plan</div>
                            <div class="balance-card-value" id="planValue">—</div>
                        </div>
                    </div>
                </div>

                <!-- Flip Card: My Keys -->
                <div class="my-keys-wrapper">
                    <div class="flip-card" id="flipCard">
                        <div class="flip-card-inner" id="flipCardInner">
                            <!-- Front -->
                            <div class="flip-card-front">
                                <div class="my-keys-btn" id="myKeysBtn">
                                    <i class="fas fa-key"></i>
                                    <span data-i18n="dash_my_keys">My Keys</span>
                                </div>
                            </div>
                            <!-- Back -->
                            <div class="flip-card-back">
                                <div class="keys-list-header">
                                    <h3 data-i18n="dash_saved_keys">Saved Keys</h3>
                                    <button class="flip-back-btn" id="flipBackBtn"><i class="fas fa-rotate-left"></i></button>
                                </div>
                                <div class="keys-list" id="keysList"></div>
                                <div class="keys-list-empty" id="keysListEmpty" style="display:none;">
                                    <i class="fas fa-inbox"></i>
                                    <p data-i18n="dash_no_keys">No saved keys yet</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="footer">
        <div class="container">
            <div class="footer-bottom" style="border-top: none; padding-top: 0;">
                <p>&copy; 2026 ZenthrexApi. <span data-i18n="footer_rights">All rights reserved.</span></p>
                <div class="footer-bottom-links">
                    <a href="stats" data-i18n="nav_stats">Stats</a>
                    <a href="docs" data-i18n="nav_docs">Docs</a>
                </div>
            </div>
        </div>
    </footer>

    <script src="script.js"></script>
</body>
</html>
