<!DOCTYPE html>
<html>

<head>
    <%- include('../Partials/head'); %>
</head>
<nav>
    <%- include('../Partials/navbar'); %>
</nav>

<body>

    <body>
        <section class="hero is-hero-bar">
            <div class="hero-body">
                <div class="level">
                    <div class="level-left">
                        <div class="level-item">
                            <h1 class="title">
                                Admin Dashboard
                            </h1>
                        </div>
                    </div>
                    <div class="level-right" style="display: none;">
                        <div class="level-item"></div>
                    </div>
                </div>
            </div>
        </section>
        <section class="section is-main-section">
            <div class="tile is-ancestor">
                <div class="tile is-parent">
                    <div class="card tile is-child">
                        <div class="card-content">
                            <div class="level is-mobile">
                                <div class="level-item">
                                    <div class="is-widget-label">
                                        <h3 class="subtitle is-spaced">
                                            Servidores
                                        </h3>
                                        <h1 class="title">
                                            <%= bot.guilds.size %>
                                        </h1>
                                    </div>
                                </div>
                                <div class="level-item has-widget-icon">
                                    <div class="is-widget-icon"><span class="icon has-text-primary is-large"><i class="mdi mdi-account-multiple mdi-48px"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tile is-parent">
                    <div class="card tile is-child">
                        <div class="card-content">
                            <div class="level is-mobile">
                                <div class="level-item">
                                    <div class="is-widget-label">
                                        <h3 class="subtitle is-spaced">
                                            Usu√°rios
                                        </h3>
                                        <h1 class="title">
                                            <%= totalUsers %>
                                        </h1>
                                    </div>
                                </div>
                                <div class="level-item has-widget-icon">
                                    <div class="is-widget-icon"><span class="icon has-text-info is-large"><i class="mdi mdi-cart-outline mdi-48px"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tile is-parent">
                    <div class="card tile is-child">
                        <div class="card-content">
                            <div class="level is-mobile">
                                <div class="level-item">
                                    <div class="is-widget-label">
                                        <h3 class="subtitle is-spaced">
                                            Recursos
                                        </h3>
                                        <h1 class="title">
                                            <%= totalRam %> | <%= totalCPU %>
                                        </h1>
                                    </div>
                                </div>
                                <div class="level-item has-widget-icon">
                                    <div class="is-widget-icon"><span class="icon has-text-success is-large"><i class="mdi mdi-finance mdi-48px"></i></span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <form action="/api/dashboard/admin/key" method="post">
                <h1 class="subtitle">Gerar KEY [Premium]</h1>
                <input name="password" id="password" class="input" type="text" placeholder="Senha Admin" />
                <br>
                <div class="control">
                    <button type="submit" class="button is-link">Gerar</button>
                </div>
                <br>
            </form>
            <div class="card">
                <header class="card-header">
                    <p class="card-header-title">
                        <span class="icon"><i class="mdi mdi-finance"></i></span>
                        Desenvolvedores | <%= bot.user.username %>
                    </p>
                </header>
                <div class="card has-table has-mobile-sort-spaced">
                    <div class="card-content">
                        <div class="b-table has-pagination">
                            <div class="table-wrapper has-mobile-cards">
                                <table class="table is-fullwidth is-striped is-hoverable is-sortable is-fullwidth">
                                    <thead>
                                        <tr>
                                            <th></th>
                                            <th>Username:</th>
                                            <th>ID:</th>
                                            <th></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <% for (const dev of devArray) { %>
                                        <tr>
                                            <td class="is-image-cell">
                                                <div class="image">
                                                    <img src="<%= dev.avatarURL %>" class="avatar">
                                                </div>
                                            </td>
                                            <td data-label="Nome"><%= dev.username %>#<%= dev.discriminator %></td>
                                            <td data-label="ID"><%= dev.id %></td>
                                        </tr>
                                        <% } %>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        </div>

        <div id="sample-modal" class="modal">
            <div class="modal-background jb-modal-close"></div>
            <div class="modal-card">
                <header class="modal-card-head">
                    <p class="modal-card-title">Confirm action</p>
                    <button class="delete jb-modal-close" aria-label="close"></button>
                </header>
                <section class="modal-card-body">
                    <p>This will permanently delete <b>Some Object</b></p>
                    <p>This is sample modal</p>
                </section>
                <footer class="modal-card-foot">
                    <button class="button jb-modal-close">Cancel</button>
                    <button class="button is-danger jb-modal-close">Delete</button>
                </footer>
            </div>
            <button class="modal-close is-large jb-modal-close" aria-label="close"></button>
        </div>
    </body>
    <footer class="footer">
        <%- include('../Partials/footer'); %>
    </footer>
</body>

</html>