<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domainer | Admin panel</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.min.css" />
    <link rel="stylesheet" href="/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body class="bg-gray-800">
    <div class="flex w-screen h-screen flex-col items-center overflow-x-hidden">
        <div class="flex flex-col text-center">
            <h1 class="text-gray-100 font-bold text-3xl">Admin panel</h1>
            <% if (message.length > 0) { %>
                <div class="alert alert-danger">
                    <%= message[0] %>
                </div>
            <% } %>
            <h2 class="text-gray-100 font-bold text-2xl">Stats</h2>
            </div>  
            <div class="flex flex-row justify-between items-center w-11/12 bg-gray-700 rounded-2xl pt-3 pb-3 mt-2">
                <div class="flex flex-col text-center ml-5">
                    <h2 class="text-base text-gray-500 ">Total subdomains</h2>
                    <h1 class="text-xl font-bold text-gray-100 "><%= stats.allSubdomains %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Approved subdomains</h2>
                    <h1 class="text-xl font-bold text-green-500 "><%= stats.approvedSubdomains %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Declined subdomains</h2>
                    <h1 class="text-xl font-bold text-red-500 "><%= stats.declinedSubdomains %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">In review subdomains</h2>
                    <h1 class="text-xl font-bold text-yellow-500 "><%= stats.pendingReviewSubdomains %></h1>
                </div>
                <div class="flex flex-col text-center mr-5">
                    <h2 class="text-base text-gray-500 ">Total users</h2>
                    <h1 class="text-xl font-bold text-gray-100 "><%= stats.totalUsers %></h1>
                </div>
                <div class="flex flex-col text-center mr-5">
                    <h2 class="text-base text-gray-500 ">Total roles</h2>
                    <h1 class="text-xl font-bold text-gray-100 "><%= stats.totalRoles %></h1>
                </div>
                <div class="flex flex-col text-center mr-5">
                    <h2 class="text-base text-gray-500 ">Version</h2>
                    <% if (latestversion == currentversion) { %>
                    <h1 class="text-xl font-bold text-green-500 "><%= currentversion %></h1>
                    <% } else { %>
                        <h1 class="text-base font-bold text-yellow-500 "><i class="fa-solid fa-circle-exclamation"></i>&nbsp;<%= currentversion %></h1>
                        <a class="text-base font-bold text-green-500" href="https://github.com/domainerapp/domainer/releases">Update to <%= latestversion %></a>
                    <% } %>
                </div>
            </div>
            <h2 class="text-gray-100 font-bold text-2xl">Users</h2>
            <div class="grid grid-cols-3 gap-3 w-11/12">
            <% users.forEach((user) => { %>
            <div class="flex flex-col p-3 bg-gray-700 rounded-2xl">
                <div class="flex flex-row justify-between items-center">
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Username</h2>
                    <h1 class="text-lg font-bold text-gray-100 "><%= user.username %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Email</h2>
                    <h1 class="text-lg font-bold text-gray-100 "><%= user.email %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Is admin?</h2>
                    <% let isAdmin = "" %>
                    <% if (user.isAdmin) {isAdmin = "Yes"} %>
                    <% if (!user.isAdmin) {isAdmin = "No"} %>
                    <h1 class="text-lg font-bold text-gray-100 "><%= isAdmin %></h1>
                </div>
            </div>
            <div class="flex flex-row justify-between items-center">
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Role</h2>
                    <h1 class="text-lg font-bold text-gray-100 "><%= user.role %></h1>
                </div>
                <div class="flex flex-col text-center">
                    <h2 class="text-base text-gray-500 ">Options</h2>
                    <div class="flex flex-row justify-between">
                    <form action="/changerole">
                        <input type="hidden" name="username" value="<%= user.username %>">
                        <button type="submit" class="rounded-2xl  pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-address-card text-gray-400"></i></button>
                    </form>
                    <form action="/deleteuser" method="post">
                        <input type="hidden" name="username" value="<%= user.username %>">
                        <button type="submit" class="rounded-2xl  pt-2 pb-2 pl-5 pr-5 mt-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-trash text-gray-400"></i></button>
                    </form>
                    </div>
                </div>
            </div>
            </div>
            <% }) %>
            </div>
            <h2 class="text-gray-100 font-bold text-2xl">Roles</h2>
            <form action="/addrole">
                <button type="submit" class="rounded-2xl mb-2 pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 text-gray-400 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-plus"></i>&nbsp;Add role</button>
            </form>
            <div class="grid grid-cols-3 gap-4 w-11/12">
                <% roles.forEach((role) => { %>
                <div class="flex flex-row justify-between items-center h-a pt-3 pb-3 pr-5 pl-5 bg-gray-700 rounded-2xl">
                    <div class="flex flex-col text-center">
                        <h2 class="text-base text-gray-500 ">Name</h2>
                        <h1 class="text-xl font-bold text-gray-100 "><%= role.name %></h1>
                    </div>
                    <div class="flex flex-col text-center">
                        <h2 class="text-base text-gray-500 ">Max subdomains</h2>
                        <h1 class="text-xl font-bold text-gray-100 "><%= role.maxSubdomains.toString() %></h1>
                    </div>
                    <div class="flex flex-col text-center">
                        <h2 class="text-base text-gray-500 ">Options</h2>
                        <% if (role.default) { %>
                            <form action="/editrole" method="get">
                                <input type="hidden" name="role" value="<%= role.name %>">
                                <button type="submit" class="rounded-2xl pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-pen-to-square text-gray-400"></i></button>
                            </form>
                        <% } else { %>
                        <div class="flex flex-row">
                            <form action="/editrole" method="get">
                                <input type="hidden" name="role" value="<%= role.name %>">
                                <button type="submit" class="rounded-2xl pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-pen-to-square text-gray-400"></i></button>
                            </form>
                            <form action="/deleterole" method="post">
                                <input type="hidden" name="role" value="<%= role.name %>">
                                <button type="submit" class="rounded-2xl  pt-2 pb-2 pl-5 pr-5 mt-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-trash text-gray-400"></i></button>
                            </form>
                        </div>
                        <% } %>
                    </div>
                </div>
                <% }) %>
                </div>
    <h2 class="text-gray-100 font-bold text-2xl">Subdomains</h2>
    <% subdomains.forEach((subdomain) => { %>
        <div class="flex flex-row justify-between items-center w-11/12 bg-gray-700 rounded-2xl pt-3 pb-3 mt-2">
            <div class="flex flex-col text-center ml-5">
                <h2 class="text-base text-gray-500 ">Subdomain</h2>
                <h1 class="text-xl font-bold text-gray-100 "><%= subdomain.subdomain %></h1>
            </div>
            <div class="flex flex-col text-center">
                <h2 class="text-base text-gray-500 ">Record type</h2>
                <h1 class="text-xl font-bold text-gray-100 "><%= subdomain.recordType %></h1>
            </div>
            <div class="flex flex-col text-center">
                <h2 class="text-base text-gray-500 ">Status</h2>
                <% if (subdomain.status == 0) { %>
                <h1 class="text-xl font-bold text-red-500"><i class="fa-solid fa-x"></i>&nbsp;Declined</h1>
                <% } else if (subdomain.status == 1) { %>
                <h1 class="text-xl font-bold text-yellow-500"><i class="fa-solid fa-clock"></i>&nbsp;In review</h1>
                <% } else if (subdomain.status == 2) { %>
                <h1 class="text-xl font-bold text-green-500"><i class="fa-solid fa-check"></i>&nbsp;Approved</h1>
                <% } else { %>
                <h1 class="text-xl font-bold text-red-500 "><i class="fa-solid fa-x"></i>&nbsp;Error in DB</h1>
                <% } %>
            </div>
            <div class="flex flex-col text-center">
                <h2 class="text-base text-gray-500 ">Pointed to</h2>
                <h1 class="text-xl font-bold text-gray-100 "><%= subdomain.pointedTo %></h1>
            </div>
            <div class="flex flex-col text-center">
                <h2 class="text-base text-gray-500 ">Owner</h2>
                <h1 class="text-xl font-bold text-gray-100 "><%= subdomain.owner %></h1>
            </div>
            <div class="flex flex-col text-center mr-5">
                <h2 class="text-base text-gray-500 ">Options</h2>
                <div class="flex flex-row">
                    <form action="/approve" method="post">
                        <input type="hidden" name="subdomain" value="<%= subdomain.subdomain %>">
                        <button type="submit" class="rounded-2xl pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 border-gray-400 border-2 hover:bg-gray-600 text-green-500"><i class="fa-solid fa-check"></i></button>
                    </form>
                    <form action="/decline" method="post">
                        <input type="hidden" name="subdomain" value="<%= subdomain.subdomain %>">
                        <button type="submit" class="rounded-2xl  pt-2 pb-2 pl-5 pr-5 mt-2 duration-200 border-gray-400 border-2 hover:bg-gray-600 text-red-500"><i class="fa-solid fa-x"></i></button>
                    </form>
                    <form action="/toreview" method="post">
                        <input type="hidden" name="subdomain" value="<%= subdomain.subdomain %>">
                        <button type="submit" class="rounded-2xl  pt-2 pb-2 pl-5 pr-5 mt-2 ml-2 duration-200 border-gray-400 border-2 hover:bg-gray-600 text-yellow-500"><i class="fa-solid fa-clock"></i></button>
                    </form>
                </div>
            </div>
        </div>
    <% }) %>
    <div class="flex flex-row">
        <form action="/dash" method="get">
            <button type="submit" class="rounded-2xl pt-2 pb-2 pl-5 pr-5 mt-2 mr-2 duration-200 border-gray-400 border-2 hover:bg-gray-600"><i class="fa-solid fa-circle-arrow-left text-gray-400"></i></button>
        </form>
    </div>
    </div>
</body>
</html>