<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
        <script src="https://kit.fontawesome.com/95fb04c6ee.js" crossorigin="anonymous"></script>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/media-query.css">
        <title> <%= bot.user.username %> - servers </title>
    </head>
    <body>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="/"><%= bot.user.username %></a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNavDropdown">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="/"><i class="fas fa-home"></i>&nbsp;Home</a>
                    </li>
                    <% if (user) { %>
                        <li class="nav-item">
                            <a class="nav-link active" href="/servers"><i class="fas fa-plus-circle"></i>&nbsp;New embed</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/logout"><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</a>
                        </li>
                    <% } else { %>
                        <li class="nav-item">
                            <a class="nav-link" href="/login"><i class="fas fa-sign-in-alt"></i>&nbsp;Login</a>
                        </li>
                    <% } %>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDarkDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="fas fa-info-circle"></i>&nbsp;Other</a>
                            <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="navbarDarkDropdownMenuLink">
                            <li><a class="dropdown-item" href="/discord"><i class="fab fa-discord"></i>&nbsp;Discord server</a></li>
                            <li><a class="dropdown-item" href="/invite"><i class="fas fa-robot"></i>&nbsp;Invite the bot</a></li>
                        </ul>
                    </li>
                </ul>
                </div>
            </div>
        </nav>
        <div class="main-servers-div">
            <div class="servers-contanier">
                <% guilds.forEach(g => { %>
                    <% if (bot.guilds.cache.has(g.id)) { %>
                        <div class="server-content">
                            <% if (g.icon) { %>
                                <div class="server-img">
                                    <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png">
                                </div>
                            <% } %>
                            <% if (!g.icon) { %>
                                <div class="server-img">
                                    <img src="/images/not-found.jpg">
                                </div>
                            <% } %>
                            <div class="server-info">
                                <p>
                                    <%= g.name %>
                                </p>
                                <button class="btn btn-dark"><a href="/server/<%= g.id %>/manage"><i class="fas fa-cogs"></i>&nbsp;manage</a></button>
                            </div>
                        </div>
                    <% } %>
                    <% if (!bot.guilds.cache.has(g.id)) { %>
                        <div class="server-content">
                            <% if (g.icon) { %>
                                <div class="server-img">
                                    <img src="https://cdn.discordapp.com/icons/<%= g.id %>/<%= g.icon %>.png">
                                </div>
                            <% } %>
                            <% if (!g.icon) { %>
                                <div class="server-img">
                                    <img src="/images/not-found.jpg">
                                </div>
                            <% } %>
                            <div class="server-info">
                                <p>
                                    <%= g.name %>
                                </p>
                                <button class="btn btn-dark"><a href="/invite"><i class="fas fa-plus-circle"></i>&nbsp;join</a></button>
                            </div>
                        </div>
                    <% } %>
                <% }) %>
            </div>
        </div>
        <footer>
            <p>all rights reserved for <a href="https://www.instagram.com/1._.a7med._.1">A7MED</a></p>
        </footer>
    </body>
</html>