<body>
<noscript>
    <div style="padding: 25px; background-color: yellow; color: black;" class="has-text-centered">
        <span class="icon">
            <i class="fas fa-exclamation-triangle"></i>
        </span>
        <span><%= __("common.jsDisabled") %></span>
    </div>
    <style>
        body {
            border-left-color: yellow;
            border-left-width: 10px;
            border-left-style: solid;
            border-right-color: yellow;
            border-right-width: 10px;
            border-right-style: solid;
            border-bottom-color: yellow;
            border-bottom-width: 10px;
            border-bottom-style: solid;
        }
    </style>
</noscript>
<% if (announcement.active === true) { %>
    <div id="announcementBody" <% if (announcement.colour === "preferred") { %>class="has-background-default has-text-centered" style="padding: 5px;"<% } else { %>style="background-color: <%= announcement.colour %>; color: <%= announcement.foreground %>; padding: 5px;" class="has-text-centered"<% } %>>
        <%- announcement.message %>
    </div>
<% } %>
<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <% if (title !== __("common.home")) { %>
            <a class="navbar-item" href="<%= linkPrefix %>" aria-hidden="true">
                <img width="28" height="28" style="width: auto !important; height: 48px !important;" alt="<% __("common.nav.logoAlt") %>" src="/img/logo-64px.<%= imageFormat %>" draggable="false">
            </a>
        <% } %>

        <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbar">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>

    <div id="navbar" class="navbar-menu">
        <div class="navbar-start"> 

            <a class="navbar-item" href="<%= linkPrefix %>">
                <span class="icon iconalign">
                    <i class="fad fa-house fa-swap-opacity" aria-hidden="true"></i>
                </span>
                <span><%= __("common.home") %></span>
            </a>

            <a class="navbar-item" href="<%= linkPrefix %>/bots">
                <span class="icon iconalign">
                    <i class="fad fa-robot" aria-hidden="true"></i>
                </span>
                <span><%= __("common.bots") %></span>
            </a>

            <a class="navbar-item" href="<%= linkPrefix %>/servers">
                <span class="icon iconalign">
                    <i class="fad fa-comments-alt fa-swap-opacity" aria-hidden="true"></i>
                </span>
                <span><%= __("common.servers") %></span>
            </a>

            <a class="navbar-item" href="<%= linkPrefix %>/templates">
                <span class="icon iconalign">
                    <i class="fad fa-clone" aria-hidden="true"></i>
                </span>
                <span><%= __("common.templates") %></span>
            </a>

            <a class="navbar-item" href="<%= linkPrefix %>/search">
                <span class="icon iconalign">
                    <i class="fas fa-search" aria-hidden="true"></i>
                </span>
                <span><%= __("common.search") %></span>
            </a>

            <div class="navbar-item has-dropdown is-hoverable">
                <div class="navbar-link" tabindex="0">
                    <span class="icon iconalign">
                        <i class="fad fa-sitemap" aria-hidden="true"></i>
                    </span>
                    <span><%= __("common.nav.more") %></span>
                </div>

                <div id="moreDropdown" class="navbar-dropdown is-hidden-touch">
                    <a class="navbar-item" href="<%= discordServer %>" target="_blank" rel="noopener" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fab fa-discord" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.discord") %></span>
                    </a>
                    <a class="navbar-item" href="https://github.com/discordextremelist/website" target="_blank" rel="noopener" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fab fa-github" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.siteRepo") %></span>
                    </a>
                    <a class="navbar-item" id="navAbout" href="<%= linkPrefix %>/about" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-info-circle" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.about") %></span>
                    </a>
                    <a class="navbar-item" href="https://discordextremelist.xyz/blog" target="_blank" rel="noopener" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-pen" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.blog") %></span>
                    </a>
                    <a class="navbar-item" href="https://status.discordextremelist.xyz" target="_blank" rel="noopener" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-thermometer-three-quarters" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.status") %></span>
                    </a>
                    <a class="navbar-item" href="<%= linkPrefix %>/docs" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-books" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.docs") %></span>
                    </a>
                    <hr class="navbar-divider">
                    <a class="navbar-item" href="<%= linkPrefix %>/terms" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-balance-scale" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.terms") %></span>
                    </a>
                    <a class="navbar-item" href="<%= linkPrefix %>/privacy" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-user-secret" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.privacy") %></span>
                    </a>
                    <a class="navbar-item" href="<%= linkPrefix %>/cookies" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-cookie" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.cookies") %></span>
                    </a>
                    <a class="navbar-item" href="<%= linkPrefix %>/guidelines" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-book" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.nav.more.guidelines") %></span>
                    </a>
                </div>
            </div>
        </div>

        <div class="navbar-end">
            <% if (req.user && req.user.db.rank.mod) { %>
                <div class="navbar-item has-dropdown is-hoverable">
                    <div class="navbar-link" tabindex="0">
                        <span class="icon iconalign">
                            <i class="fad fa-cogs" aria-hidden="true"></i>
                        </span>
                        <span id="staffPanelDropdownTitle"><%= __("common.nav.me.staffPanel") %></span>
                    </div>

                    <div id="moreDropdown" class="navbar-dropdown is-hidden-touch">
                        <a class="navbar-item" href="<%= linkPrefix %>/staff">
                            <span class="icon iconalign">
                                <i class="fad fa-house" aria-hidden="true"></i>
                            </span>
                            <span><%= __("page.staff.home") %></span>
                        </a>
                        <a class="navbar-item" href="<%= linkPrefix %>/staff/bot_queue">
                            <span class="icon iconalign">
                                <i class="fad fa-list-ul" aria-hidden="true"></i>
                            </span>
                            <span><%= __("page.staff.queue") %></span>
                        </a>
                        <a class="navbar-item" href="<%= linkPrefix %>/staff/server_queue">
                            <span class="icon iconalign">
                                <i class="fad fa-list-ul" aria-hidden="true"></i>
                            </span>
                            <span><%= __("page.staff.server_queue") %></span>
                        </a>
                        <% if (req.user.db.rank.assistant === true) { %>  
                            <a class="navbar-item" href="<%= linkPrefix %>/staff/invite_queue">
                                <span class="icon iconalign">
                                    <i class="fad fa-list-ul" aria-hidden="true"></i>
                                </span>
                                <span><%= __("page.staff.invite_queue") %></span>
                            </a>
                            <a class="navbar-item" href="<%= linkPrefix %>/staff/staff-manager">
                                <span class="icon iconalign">
                                    <i class="fad fa-users-cog" aria-hidden="true"></i>
                                </span>
                                <span><%= __("page.staff.manager") %></span>
                            </a>
                            <a class="navbar-item" href="<%= linkPrefix %>/staff/audit">
                                <span class="icon iconalign">
                                    <i class="fad fa-archive" aria-hidden="true"></i>
                                </span>
                                <span><%= __("page.staff.audit") %></span>
                            </a>
                            <a class="navbar-item" href="<%= linkPrefix %>/staff/announce">
                                <span class="icon iconalign">
                                    <i class="fad fa-megaphone" aria-hidden="true"></i>
                                </span>
                                <span><%= __("page.staff.announcer") %></span>
                            </a>
                        <% } %>
                    </div>
                </div>
            <% } %>
            <div class="navbar-item has-dropdown is-hoverable">
                <div class="navbar-link" tabindex="0">
                    <span class="icon iconalign">
                        <i class="fad fa-language" aria-hidden="true"></i>
                    </span>
                    <span id="localeDropdownTitle"><%= __("common.nav.language") %></span>
                </div>

                <div id="localeDropdown" class="navbar-dropdown is-hidden-touch">
                    <<% if (req.locale !== "en-NZ") { %>a href="<%= req.originalUrl.replace(req.locale, "en-NZ") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "en-NZ") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.en-NZ", locale: "en-NZ" }) %></span>
                    </<%= req.locale !== "en-NZ" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "en-GB") { %>a href="<%= req.originalUrl.replace(req.locale, "en-GB") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "en-GB") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.en-UK", locale: "en-GB" }) %></span>
                    </<%= req.locale !== "en-GB" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "en-US") { %>a href="<%= req.originalUrl.replace(req.locale, "en-US") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "en-US") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.en-US", locale: "en-US" }) %></span>
                    </<%= req.locale !== "en-US" ? 'a' : 'div' %>>
                    <hr class="navbar-divider">
                    <<% if (req.locale !== "fr-FR") { %>a href="<%= req.originalUrl.replace(req.locale, "fr-FR") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "fr-FR") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.fr", locale: "fr-FR" }) %></span>
                    </<%= req.locale !== "fr-FR" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "de-DE") { %>a href="<%= req.originalUrl.replace(req.locale, "de-DE") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "de-DE") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.de", locale: "de-DE" }) %></span>
                    </<%= req.locale !== "de-DE" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "he-IL") { %>a href="<%= req.originalUrl.replace(req.locale, "he-IL") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "he-IL") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.he", locale: "he-IL" }) %></span>
                    </<%= req.locale !== "he-IL" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "hu-HU") { %>a href="<%= req.originalUrl.replace(req.locale, "hu-HU") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "hu-HU") { %>
                            <span title="Selected" href="<%= req.originalUrl.replace(req.locale, "hu-HU") %>" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.hu", locale: "hu-HU" }) %></span>
                    </<%= req.locale !== "hu-HU" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "it-IT") { %>a href="<%= req.originalUrl.replace(req.locale, "it-IT") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "it-IT") { %>
                            <span title="Selected" href="<%= req.originalUrl.replace(req.locale, "it-IT") %>" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.it", locale: "it-IT" }) %></span>
                    </<%= req.locale !== "it-IT" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "pt-PT") { %>a href="<%= req.originalUrl.replace(req.locale, "pt-PT") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "pt-PT") { %>
                            <span title="Selected" href="<%= req.originalUrl.replace(req.locale, "pt-PT") %>" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.pt", locale: "pt-PT" }) %></span>
                    </<%= req.locale !== "pt-PT" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "es-ES") { %>a href="<%= req.originalUrl.replace(req.locale, "es-ES") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "es-ES") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.es-ES", locale: "es-ES" }) %></span>
                    </<%= req.locale !== "es-ES" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "sv-SE") { %>a href="<%= req.originalUrl.replace(req.locale, "sv-SE") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "sv-SE") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.sv-SE", locale: "sv-SE" }) %></span>
                    </<%= req.locale !== "sv-SE" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "nl-NL") { %>a href="<%= req.originalUrl.replace(req.locale, "nl-NL") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "nl-NL") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.nl-NL", locale: "nl-NL" }) %></span>
                    </<%= req.locale !== "nl-NL" ? 'a' : 'div' %>>
                    <<% if (req.locale !== "tr-TR") { %>a href="<%= req.originalUrl.replace(req.locale, "tr-TR") + (req.originalUrl.includes('?') ? '&' : '?') %>setLang=t"<% } else { %>div<% } %> class="navbar-item" rel="nofollow" tabindex="0">
                        <% if (req.locale === "tr-TR") { %>
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __({ phrase: "common.nav.language.tr-TR", locale: "tr-TR" }) %></span>
                    </<%= req.locale !== "tr-TR" ? 'a' : 'div' %>>
                    <hr class="navbar-divider">
                    <a class="navbar-item" target="_blank" rel="noopener" href="https://github.com/discordextremelist/i18n/blob/master/help.md" tabindex="0">
                        <span id="helpUsSpan">
                            <%= __("common.nav.language.helpUs") %>
                        </span>
                    </a>
                    <% if (req.session.disableRTL === true) { %>
                        <a class="navbar-item" href="<%= req.originalUrl + (req.originalUrl.includes('?') ? '&' : '?') %>localeLayout=rtl" rel="nofollow" tabindex="0">
                            <span title="Selected" class="icon has-text-success iconalign">
                                <i class="fad fa-check-circle" aria-hidden="true"></i>
                            </span>
                            <span class="has-text-success">
                                <%= __("common.nav.language.enableRTL") %>
                            </span>
                        </a>
                    <% } else if (!req.session.disableRTL && req.session.rtlLanguage) { %>
                        <a class="navbar-item" href="<%= req.originalUrl + (req.originalUrl.includes('?') ? '&' : '?') %>localeLayout=ltr" rel="nofollow" tabindex="0">
                            <span title="Selected" class="icon has-text-danger iconalign">
                                <i class="fad fa-times-circle" aria-hidden="true"></i>
                            </span>
                            <span class="has-text-danger">
                                <%= __("common.nav.language.disableRTL") %>
                            </span>
                        </a>
                    <% } %>
                </div>
            </div>

            <% if (req.user) { %>
                <div class="navbar-item has-dropdown is-hoverable">
                    <div class="navbar-link" tabindex="0">
                        <img width="28" height="28" style="margin-right: 6px; border-radius: 50%; vertical-align: middle;" src="<%= req.user.db.avatar.hash ? req.user.db.avatar.url : `${baseURL}/img/defaultavatar` %>.<%= imageFormat %>?size=64" alt="<%= req.user.db.fullUsername %>'s Discord Profile Picture" onerror=<%= "this.onerror=null,this.src=&quot;/img/defaultavatar." + imageFormat + "&quot;" %> type="image/<%= imageFormat %>" draggable="false">
                        <span style="vertical-align: middle;">&nbsp; <%= req.user.db.fullUsername %> </span>
                    </div>

                    <div id="userDropdown" class="navbar-dropdown is-hidden-touch is-right">
                        <a class="navbar-item" href="<%= linkPrefix %>/users/@me" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-user fa-swap-opacity" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.nav.me.profile") %></span>
                        </a>
                        <a class="navbar-item" href="<%= linkPrefix %>/users/account/preferences" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-swatchbook" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.nav.me.preferences") %></span>
                        </a>
                        <a class="navbar-item" href="<%= linkPrefix %>/bots/submit" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-robot" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.nav.me.submitBot") %></span>
                        </a>
                        <a class="navbar-item" href="<%= linkPrefix %>/servers/submit" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-comments-alt fa-swap-opacity" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.nav.me.submitServer") %></span>
                        </a>
                        <a class="navbar-item" id="navTemplate" href="<%= linkPrefix %>/templates/submit" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-clone" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.nav.me.submitTemplate") %></span>
                        </a>
                        <% if (req.user.db.preferences.enableGames === true) { %>
                            <hr class="navbar-divider">
                            <a class="navbar-item" href="<%= linkPrefix %>/users/game/snake" tabindex="0">
                                <span class="icon iconalign">
                                    <i class="fad fa-snake" aria-hidden="true"></i>
                                </span>
                                <span><%= __("common.nav.me.playSnake") %></span>
                            </a>
                            <a class="navbar-item" id="navSnake" href="<%= linkPrefix %>/users/game/snake/leaderboard" tabindex="0">
                                <span class="icon iconalign">
                                    <i class="fad fa-podium-star" aria-hidden="true"></i>
                                </span>
                                <span><%= __("common.nav.me.snakeLB") %></span>
                            </a>
                        <% } %>
                        <a id="logoutDropdown" class="navbar-item has-text-danger" href="/auth/logout" tabindex="0">
                            <span class="icon iconalign">
                                <i class="fad fa-sign-out" aria-hidden="true"></i>
                            </span>
                            <span><%= __("common.logout") %></span>
                        </a>
                </div>
                </div>
            <% } else { %>
                <a class="navbar-item has-text-blurple is-hidden-desktop" href="/auth/login" tabindex="0">
                    <span class="icon iconalign">
                        <i class="fab fa-discord" aria-hidden="true"></i>
                    </span>
                    <span><%= __("common.login") %></span>
                </a>
            <% } %>
            <div class="navbar-item buttons">
                <% if (req.user) { %>
                    <a id="logoutButton" class="button is-danger" href="/auth/logout">
                        <span class="icon">
                            <i class="fad fa-sign-out" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.logout") %></span>
                        </a>
                <% } else { %>
                    <a class="button is-blurple is-hidden-touch" <% if (hideLogin && hideLogin === true) { %>style="display: none;"<% } %> href="/auth/login">
                        <span class="icon">
                            <i class="fab fa-discord" aria-hidden="true"></i>
                        </span>
                        <span><%= __("common.login") %></span>
                    </a>
                <% } %>
            </div>
        </div>
    </div>
</nav>
<div id="siteContent">
