<!DOCTYPE html>
<html lang="en" data-bs-theme="auto">

<head>
    <script src="/assets/js/color-modes.js"></script>

    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description"
        content='You ask yourself, why is this dashboard looks like its from 2005. A voice says "because we have no budget."' />
    <title>GoLink Admin Dashboard</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3" />

    <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet" />

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            width: 100%;
            height: 3rem;
            background-color: rgba(0, 0, 0, 0.1);
            border: solid rgba(0, 0, 0, 0.15);
            border-width: 1px 0;
            box-shadow: inset 0 0.5em 1.5em rgba(0, 0, 0, 0.1),
                inset 0 0.125em 0.5em rgba(0, 0, 0, 0.15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -0.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }

        .btn-bd-primary {
            --bd-violet-bg: #712cf9;
            --bd-violet-rgb: 112.520718, 44.062154, 249.437846;

            --bs-btn-font-weight: 600;
            --bs-btn-color: var(--bs-white);
            --bs-btn-bg: var(--bd-violet-bg);
            --bs-btn-border-color: var(--bd-violet-bg);
            --bs-btn-hover-color: var(--bs-white);
            --bs-btn-hover-bg: #6528e0;
            --bs-btn-hover-border-color: #6528e0;
            --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
            --bs-btn-active-color: var(--bs-btn-hover-color);
            --bs-btn-active-bg: #5a23c8;
            --bs-btn-active-border-color: #5a23c8;
        }

        .bd-mode-toggle {
            z-index: 1500;
        }

        .bd-mode-toggle .dropdown-menu .active .bi {
            display: block !important;
        }
    </style>

    <!-- Custom styles for this template -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css" rel="stylesheet" />
    <!-- Custom styles for this template -->
    <link href="/assets/dashboard.css" rel="stylesheet" />
</head>

<body>
    <header class="navbar sticky-top bg-dark flex-md-nowrap p-0 shadow" data-bs-theme="dark">
        <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3 fs-6 text-white" href="#">GoLink Admin Dashboard</a>

        <ul class="navbar-nav flex-row d-md-none">
            <li class="nav-item text-nowrap">
                <button class="nav-link px-3 text-white" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarSearch" aria-controls="navbarSearch" aria-expanded="false"
                    aria-label="Toggle search">
                    <svg class="bi">
                        <use xlink:href="#search" />
                    </svg>
                </button>
            </li>
            <li class="nav-item text-nowrap">
                <button class="nav-link px-3 text-white" type="button" data-bs-toggle="offcanvas"
                    data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <svg class="bi">
                        <use xlink:href="#list" />
                    </svg>
                </button>
            </li>
        </ul>

        <div id="navbarSearch" class="navbar-search w-100 collapse">
            <input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search" />
        </div>
    </header>

    <div class="container-fluid">
        <div class="row">
            <div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
                <div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu"
                    aria-labelledby="sidebarMenuLabel">
                    <div class="offcanvas-header">
                        <h5 class="offcanvas-title" id="sidebarMenuLabel">
                            GoLink Admin Dashboard
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="offcanvas"
                            data-bs-target="#sidebarMenu" aria-label="Close"></button>
                    </div>
                    <div class="offcanvas-body d-md-flex flex-column p-0 pt-lg-3 overflow-y-auto">
                        <ul class="nav flex-column">
                            <li class="nav-item">
                                <a class="nav-link d-flex align-items-center gap-2" href="/account/logout">
                                    Sign out
                                </a>
                            </li>
                        </ul>

                        <h5
                            class="d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary">
                            <span>Links</span>
                            <a class="text-decoration-none" href="#" data-bs-toggle="modal"
                                data-bs-target="#createModal">
                                +
                            </a>
                        </h5>
                        <ul class="nav flex-column mb-auto">
                            <% for ( const link of (links ?? []) ) { %>
                                <li class="nav-item">
                                    <a class="nav-link d-flex align-items-center gap-2" href="/admin/<%= link %>">
                                        <%= link %>
                                    </a>
                                </li>
                                <% } %>
                        </ul>
                    </div>
                </div>
            </div>

            <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
                <div
                    class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Viewing GoLink: <%= id %>
                    </h1>
                    <div class="btn-toolbar mb-2 mb-md-0">
                        <button type="button" class="btn btn-sm btn-danger" data-bs-toggle="modal"
                            data-bs-target="#deleteModal">
                            Delete GoLink
                        </button>
                    </div>
                </div>

                <div class="form-text">Type: <%= type %> <% if (type === 'discord') { %><br /> Allowed users: <%= (users ?? []).join(', ') %> <% } else if (type === 'password') { %> <br /> Password: <span style="user-select: none; background: black; color: black;" onclick="this.style.color === 'black' ? this.style.color = 'white' : this.style.color = 'black';"><%= password %></span> <% } %></div>

                <h2>Access log</h2>
                <div class="table-responsive small">
                    <table class="table table-striped table-sm">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Discord user</th>
                                <th scope="col">Result</th>
                                <th scope="col">Date</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% for ( const view of (views ?? []).reverse() ) { %>
                                <tr>
                                    <td>#</td>
                                    <td>
                                        <%= view.user %>
                                    </td>
                                    <td class="text-<%= view.result === 0 ? 'success' : 'danger' %>">
                                        <%= view.result===0 ? 'Succeeded' : 'Failed' %>
                                    </td>
                                    <td class="__dateTimeFormat">
                                        <%= view.date %>
                                    </td>
                                </tr>
                                <% } %>
                        </tbody>
                    </table>
                </div>
            </main>
        </div>
    </div>

    <div class="modal fade" id="createModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5">Create new GoLink</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">ID</label>
                            <div class="input-group">
                                <span class="input-group-text" id="basic-addon3">https://go.zyrenth.dev/</span>
                                <input type="text" class="form-control" id="golink-code">
                            </div>
                        </div>
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">URL</label>
                            <input type="text" class="form-control" id="golink-url"
                                placeholder="https://github.com/Zyrenth">
                        </div>
                        <div class="mb-3">
                            <label for="recipient-name" class="col-form-label">Type</label>
                            <select class="form-select" id="golink-type">
                                <option value="none" selected>Access without authentication</option>
                                <option value="discord">Access with Discord</option>
                                <option value="password">Access with password</option>
                            </select>
                        </div>
                        <div class="mb-3" id="discord-type-container" hidden="true">
                            <label for="recipient-name" class="col-form-label">Discord User IDs</label>
                            <input type="text" class="form-control" id="golink-discord">
                            <div class="form-text" id="basic-addon4">Separated with commas like this:
                                509018277549309962, 509018277549309962, 509018277549309962</div>
                        </div>
                        <div class="mb-3" id="password-type-container" hidden="true">
                            <label for="recipient-name" class="col-form-label">Password</label>
                            <input type="text" class="form-control" id="golink-password" autocomplete="off">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Discard</button>
                    <button type="button" class="btn btn-success" id="golink-submit">Create</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="deleteModal" tabindex="-1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">Delete GoLink: <%= id %>?</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    Confirm if you want to delete the following GoLink: <%= id %>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-bs-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-danger" id="golink-delete-submit">Delete</button>
                </div>
            </div>
        </div>
    </div>

    <script src="/assets/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        function randStr(l) {
            const charset = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
            let res = "";
            for (let i = 0; i < l; i++) {
                const rI = Math.floor(Math.random() * charset.length);
                res += charset.charAt(rI);
            }
            return res;
        }

        const createModal = document.getElementById('createModal'),
            golinkSubmit = document.getElementById('golink-submit'),
            golinkCode = document.getElementById('golink-code'),
            golinkUrl = document.getElementById('golink-url'),
            golinkType = document.getElementById('golink-type'),
            golinkDiscord = document.getElementById('golink-discord'),
            golinkPassword = document.getElementById('golink-password'),
            golinkDeleteSubmit = document.getElementById('golink-delete-submit'),
            discordTypeContainer = document.getElementById('discord-type-container'),
            passwordTypeContainer = document.getElementById('password-type-container'),
            dateDivs = document.getElementsByClassName('__dateTimeFormat');

        golinkCode.value = randStr(8);
        golinkType.value = 'none';

        for (const dDiv of [...dateDivs]) {
            dDiv.innerHTML = new Date(parseInt(dDiv.innerHTML)).toLocaleString();
        }

        golinkType.addEventListener('change', (e) => {
            if (e.target.value === 'none') {
                discordTypeContainer.hidden = true;
                passwordTypeContainer.hidden = true;
            } else if (e.target.value === 'discord') {
                discordTypeContainer.hidden = false;
                passwordTypeContainer.hidden = true;
            } else if (e.target.value === 'password') {
                discordTypeContainer.hidden = true;
                passwordTypeContainer.hidden = false;
            }
        });

        golinkSubmit.addEventListener('click', async () => {
            if (!golinkCode.value) return alert('ID field is required.');

            const obj = {
                id: golinkCode.value,
                url: golinkUrl.value.split('').length === 0 ? 'https://github.com/Zyrenth' : golinkUrl.value,
                type: golinkType.value.split('').length === 0 ? 'none' : golinkType.value
            };

            if (golinkType.value === 'discord') obj['users'] = golinkDiscord.value.replace(/ /g, '').split(',');
            else if (golinkType.value === 'password') obj['password'] = golinkPassword.value;

            const req = await fetch('/api/v1/link', {
                headers: {
                    'Content-Type': 'application/json'
                },
                method: 'POST',
                body: JSON.stringify(obj)
            });

            const response = await req.json();

            if (response.success) location.replace('/admin/' + encodeURIComponent(golinkCode.value));
            else alert('GoLink creation failed.');
        });

        golinkDeleteSubmit.addEventListener('click', async () => {
            const req = await fetch('/api/v1/link', {
                headers: {
                    'Content-Type': 'application/json'
                },
                method: 'DELETE',
                body: JSON.stringify({
                    id: '<%= id %>'
                })
            });

            const response = await req.json();

            if (response.success) location.replace('/admin');
            else alert('GoLink deletion failed.');
        });
    </script>
</body>

</html>