<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - ErtixNodes</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            background-color: #1F2937;
            color: #E5E7EB;
            font-family: 'Inter', sans-serif;
        }

        header {
            background-color: #111827;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            padding: 1rem 0;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        nav ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        nav ul li {
            display: inline-block;
            margin-right: 1rem;
        }

        nav ul li a {
            color: #E5E7EB;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: background-color 0.2s ease;
        }

        nav ul li a:hover {
            background-color: #374151;
        }

        h2 {
            font-size: 1.75rem;
            margin-bottom: 1rem;
            text-align: center;
        }

        .bg-white {
            background-color: #2D3748;
            transition: box-shadow 0.2s ease;
            color: #E5E7EB;
            padding: 2rem; /* Adjusted padding for scaling */
            border-radius: 0.5rem; /* Ensure rounded corners */
            width: 100%; /* Set to full width */
            max-width: 800px; /* Set maximum width */
            margin: 1rem auto; /* Center with margin */
        }

        .bg-white:hover {
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        .main-content {
            width: 600px;
            flex-direction: column;
            align-items: center;
            padding: 2rem;
        }

        .btn {
            display: inline-block;
            padding: 0.75rem 1.5rem; /* Adjusted padding for button scaling */
            border-radius: 0.375rem;
            font-weight: bold;
            color: white;
            cursor: pointer;
            transition: background-color 0.2s ease, transform 0.2s ease;
            border: none;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            font-size: 0.875rem; /* Adjusted font size for better scaling */
        }

        .btn-gradient {
            background: linear-gradient(90deg, #3182ce, #2b6cb0);
        }

        .btn-gradient:hover {
            transform: scale(1.05);
        }

        input[type="text"],
        select {
            width: 100%;
            padding: 0.75rem;
            border-radius: 0.375rem;
            border: 1px solid #4A5568;
            background-color: #374151;
            color: #E5E7EB;
        }

        input[type="text"]:focus,
        select:focus {
            border-color: #3182ce;
            outline: none;
        }

        .ad-container {
            margin-top: 2rem;
            text-align: center;
        }

        .notification {
            background-color: #2C3E50;
            padding: 1rem;
            border-radius: 0.375rem;
            text-align: center;
            margin-bottom: 1rem;
        }
    </style>
    <script type="text/javascript">
        var _protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
        var _url = _protocol + "ads.monetag.com/tag.js";
        var monetag = document.createElement('script');
        monetag.src = _url;
        document.body.appendChild(monetag);
    </script>
</head>

<body>

    <header>
        <div class="container flex justify-between items-center px-4">
            <div class="text-xl font-bold text-white">ErtixNodes Dashboard</div>
            <nav>
                <ul class="flex space-x-4">
                    <li><a href="/dash" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-house mr-1"></i>Home</a></li>
                    <li><a href="/dash/create" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-plus mr-1"></i>Create</a></li>
                    <li><a href="/dash/earn" class="text-gray-400 hover:text-blue-400 transition duration-200"><i class="fa-solid fa-money-bill-wave mr-1"></i>Earn</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main class="main-content container mx-auto">
        <h2 class="font-bold mb-6">Welcome, <%- req.session.user.global_name %>!</h2>

        <!-- Home Section -->
        <section id="home" class="mb-10">
            <div class="bg-white shadow transition-transform transform hover:scale-105">
                <div class="flex items-center justify-center">
                    <i class="fas fa-coins text-yellow-400 text-4xl mr-3"></i>
                    <span class="text-lg font-semibold">Balance: <strong id="bal"><%- user.balance %></strong> credits</span>
                </div>
            </div>

            <div class="bg-white shadow transition-transform transform hover:scale-105 mt-4">
                <div class="flex items-center justify-center">
                    <i class="fas fa-server text-blue-500 text-4xl mr-3"></i>
                    <span class="text-lg font-semibold"><%- vps.length %> / <%- user.serverLimit %> vps</span>
                </div>
            </div> 

            <h2 class="text-white text-2xl font-bold">VPS:</h2>

            <% for(let i = 0; i < vps.length; i++) { %>
                <div class="bg-white p-8 rounded-lg shadow mb-2">
                    <h3 class="text-xl font-bold mb-2"><%- vps[i].name %> - <%- vps[i].os %></h3>
                    <p class="mb-2"><i class="fa fa-circle-question"></i> Type: <%- vps[i].uptimeType %></p>
                    <p class="mb-2"><i class="fa fa-circle"></i> Status: <%- vps[i].status %></p>
                    <p class="mb-2"><i class="fa fa-server"></i> <%- vps[i].ram %> GB - <%- vps[i].cpu %> vCPU - <%- vps[i].disk %> disk</p>
                    <div class="flex justify-between">
                        <a href="/dash/vps/<%- vps[i].proxID %>" class="btn bg-blue-500 mr-4">Manage</a>
                        <!-- <a href="/dash/vps" class="btn bg-red-600" onclick="deleteVPS(<%- vps[i].id %>);">Renew</a> -->
                    </div>
                </div>
            <% } %>

            <a class="btn btn-gradient mt-6 w-full text-center" href="/dash/create"><i class="fas fa-server mr-1"></i>Create VPS</a>
        </section>
    </main>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.getElementById('bal').innerText = '<%- user.balance %>';
        });
    </script>
</body>

</html>