<%- include("../../partials/header.ejs") %>
<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BreadcrumbList",
        "itemListElement": [
            {
                "@type": "ListItem",
                "position": 1,
                "name": "Home",
                "item": "<%= baseURL %><%= linkPrefix %>"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "Servers",
                "item": "<%= baseURL %><%= linkPrefix %>/servers"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "<%= server.name %>",
                "item": "<%= baseURL %><%= linkPrefix %>/servers/<%= server._id %>"
            }
        ]
    }
</script>

<%- include("../../partials/nav.ejs") %>
<style>.tag:not(body).is-default{background-color:<%= defaultColour %>;color:<%= foreground %>}</style>
<style>h1{font-size:48px}h2{font-size:40px}h3{font-size:32px}h4{font-size:24px}h5{font-size:20px}h6{font-size:16px}strong{color:#fff}code{background-color:#1f1f1f}pre{color:#ff3860;background-color:#1f1f1f}table th{color:#d2d2d2}a:hover{color:#1c5abd}.content h1,.content h2,.content h3,.content h4,.content h5,.content h6{color:#fff;font-weight:inherit}table{display:block;width:100%;overflow:auto;word-break:normal;word-break:keep-all;-webkit-overflow-scrolling:touch}blockquote{background-color:transparent!important;}</style>
<%- include("../../partials/isDefaultCSS/codeTag.ejs") %>
<section class="hero is-primary">
    <div class="hero-body">
        <br>
        <div class="container">
            <div class="columns">
                <div class="column is-2">
                    <img class="image" title="<%= server.name %>'s Icon'" style="margin: auto; width: 128px; border-radius: 50%;" src="<%= server.icon.hash ? server.icon.url : `${baseURL}/img/defaultavatar` %>.<%= imageFormat %>?size=512" alt="<%= server.name %>'s Icon" onerror="this.onerror = null;this.src = '/img/defaultavatar.<%= imageFormat %>';console.log('Failed to load item\'s avatar/icon, using default instead.');" draggable="false">
                </div>
                <div class="column is-10">
                    <h1 class="is-size-1 <% if (mobile) { %>has-text-centered<% } %>">
                        <% if (!phone) { %><span id="serverName"><%= server.name %></span><% } %>
                        <% if (server.status && server.status.reviewRequired === true) { %>
                            <span style="vertical-align: middle;" title="<%= __("common.rank.reviewRequired") %>" class="icon is-medium is-size-3 iconalign">
                                <i aria-hidden="true" class="fad fa-exclamation-triangle has-text-danger fa-1x"></i>
                            </span>
                        <% } %>
                        <% if (phone) { %>
                            <% if (server.status && server.status.reviewRequired === true) { %><br /><% } %>
                            <span id="serverName">
                                <%= server.name %>
                            </span>
                        <% } %>
                    </h1>
                    <h2 class="subtitle <% if (mobile) { %>has-text-centered<% } %>"><%= server.shortDesc %></h2>
                    <% if (req.user) { %>
                        <div class="buttons page <% if (mobile) { %>is-centered<% } %>">
                            <% if (server.owner.id === req.user.id) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-success", 
                                        icon: "fas fa-sync-alt", 
                                        tag: "a", 
                                        message: __("common.sync"), 
                                        href: `${linkPrefix}/servers/${server._id}/sync`, 
                                        additional: ""
                                    });
                                %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-warning", 
                                        icon: "fas fa-pencil", 
                                        tag: "a", 
                                        message: __("common.edit"), 
                                        href: `${linkPrefix}/servers/${server._id}/edit`, 
                                        additional: ""
                                    });
                                %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-danger", 
                                        icon: "fas fa-trash", 
                                        tag: "a", 
                                        message: __("common.delete"), 
                                        href: "", 
                                        additional: "id=\"deleteModal\""
                                    });
                                %>
                            <% } %>
                            <% if (req.user.db.rank.mod) { %>
                                <div class="dropdown is-hoverable">
                                    <div class="dropdown-trigger">
                                        <%- 
                                            include("../../partials/button.ejs", { 
                                                className: "button is-dark", 
                                                icon: "fas fa-cogs", 
                                                tag: "dropdownButton", 
                                                message: __("common.staffManagement"), 
                                                href: "", 
                                                additional: "style=\"direction: ltr;\""
                                            });
                                        %>
                                    </div>
                                    <div class="dropdown-menu" id="dropdown-ui-actions" role="menu">
                                        <div class="dropdown-content">
                                            <div class="dropdown-item">
                                                <p class="has-text-danger"><%= __("common.staffManagement.warning") %></p>
                                            </div>
                                            <hr class="dropdown-divider">
                                            <a class="dropdown-item has-text-success" href="<%= linkPrefix %>/servers/<%= server._id %>/sync">
                                                <span class="icon"><i aria-hidden="true" class="fas fa-sync-alt"></i></span>
                                                <span><%= __("common.sync") %></span>
                                            </a>
                                            <% if (req.user.db.rank.assistant === true) { %>
                                                <a class="dropdown-item has-text-warning" href="<%= linkPrefix %>/servers/<%= server._id %>/edit">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-pencil"></i></span>
                                                    <span><%= __("common.edit") %></span>
                                                </a>
                                            <% } %>
                                            <% if (server.status && server.status.reviewRequired === true) { %>
                                                <a class="dropdown-item has-text-success" href="<%= linkPrefix %>/servers/<%= server._id %>/approve">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-check"></i></span>
                                                    <span><%= __("common.staff.approve") %></span>
                                                </a>
                                                <a class="dropdown-item has-text-danger" href="<%= linkPrefix %>/servers/<%= server._id %>/decline">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-times"></i></span>
                                                    <span><%= __("common.staff.decline") %></span>
                                                </a>
                                            <% } %>
                                            <a class="dropdown-item has-text-danger" href="<%= linkPrefix %>/servers/<%= server._id %>/remove">
                                                <span class="icon"><i aria-hidden="true" class="fas fa-trash"></i></span>
                                                <span><%= __("common.staff.remove") %></span>
                                            </a>
                                            <a class="dropdown-item" onclick="copyToClipboard('<%= server._id %>');">
                                                <span class="icon"><i aria-hidden="true" class="fas fa-copy"></i></span>
                                                <span><%= __("common.copyID") %></span>
                                            </a>
                                            <a class="dropdown-item" onclick="copyToClipboard('<%= server.owner.id %>');">
                                                <span class="icon"><i aria-hidden="true" class="fas fa-copy"></i></span>
                                                <span><%= __("common.copyOwnerID") %></span>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            <% } %> 
                        </div>
                    <% } %>
                    <div class="buttons page <% if (mobile) { %>is-centered<% } %>">
                        <%- 
                            include("../../partials/button.ejs", { 
                                className: "button is-info", 
                                icon: "fas fa-users-medical", 
                                tag: "a", 
                                message: __("common.join"), 
                                href: server.links.invite, 
                                additional: "target=\"_blank\" rel=\"noopener\""
                            });
                        %>
                        <% if (server.links.website) { %>
                            <%- 
                                include("../../partials/button.ejs", { 
                                    className: "button is-link", 
                                    icon: "fas fa-globe", 
                                    tag: "a", 
                                    message: __("common.website"), 
                                    href: server.links.website, 
                                    additional: "target=\"_blank\" rel=\"noopener\""
                                });
                            %>
                        <% } %>
                        <% if (server.links.donation) { %>
                            <%- 
                                include("../../partials/button.ejs", { 
                                    className: "button is-success", 
                                    icon: "fas fa-dollar-sign", 
                                    tag: "a", 
                                    message: __("common.donate"), 
                                    href: server.links.donation, 
                                    additional: "target=\"_blank\" rel=\"noopener\""
                                });
                            %>
                        <% } %>
                    </div>
                    <div class="field is-grouped is-grouped-multiline <% if (mobile) { %>is-grouped-centered<% } %>">
                        <%- 
                            include("../../partials/tag.ejs", { 
                                contentColour: "is-link", 
                                title: __("common.listingOwner"),
                                content: "insOwner-server",
                                type: "multi"
                            });
                        %>
                        <% if (server.counts) { %>
                            <%- 
                                include("../../partials/tag.ejs", { 
                                    contentColour: "is-info", 
                                    title: __("common.members"),
                                    content: server.counts.members.toLocaleString(locale),
                                    type: "multi",
                                    id: "members"
                                });
                            %>
                            <%- 
                                include("../../partials/tag.ejs", { 
                                    contentColour: "is-success", 
                                    title: __("common.online"),
                                    content: server.counts.online.toLocaleString(locale),
                                    type: "multi",
                                    id: "online"
                                });
                            %>
                        <% } %>
                    </div>
                    <% if (server.tags && server.tags.length > 0) { %>
                        <div class="field is-grouped is-grouped-multiline <% if (mobile) { %>is-grouped-centered<% } %>">
                            <% if (server.tags.includes("Gaming")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-link", 
                                        title: "",
                                        content: __("common.tags.gaming"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Music")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-info", 
                                        title: "",
                                        content: __("common.tags.music"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Media & Entertainment")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-success", 
                                        title: "",
                                        content: __("common.tags.mediaEntertainment"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Creative Arts")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-orange", 
                                        title: "",
                                        content: __("common.tags.creativeArts"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Science & Tech")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-danger", 
                                        title: "",
                                        content: __("common.tags.scienceTech"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Education")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-magenta", 
                                        title: "",
                                        content: __("common.tags.education"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Fashion & Beauty")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-pink", 
                                        title: "",
                                        content: __("common.tags.fashionBeauty"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Relationships & Identity")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-link", 
                                        title: "",
                                        content: __("common.tags.relationshipIdentity"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Fitness & Health")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-info", 
                                        title: "",
                                        content: __("common.tags.fitnessHealth"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Travel & Food")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-success", 
                                        title: "",
                                        content: __("common.tags.travelFood"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Finance")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-orange", 
                                        title: "",
                                        content: __("common.tags.finance"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("Content Creation")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-danger", 
                                        title: "",
                                        content: __("common.tags.contCreat"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (server.tags.includes("NSFW")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-pink", 
                                        title: "",
                                        content: __("common.tags.nsfw"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</section> 
<div class="container" style="overflow: hidden;">
    <% if (req.user?.db.preferences.experiments === true && server.previewChannel) { %>
        <div style="margin: 1.5em 1.5em 0">
            <widgetbot
                server="<%= server._id %>"
                channel="<%= server.previewChannel %>"
                width="100%"
                height="600"
            ></widgetbot>
            <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
        </div>
    <% } %> 
    <div id="content" class="section content" style="white-space: pre-wrap;"><%- longDesc || __("common.unavailable.longDesc") %></div>
</div>
<div class="modal deleteModal">
    <div class="modal-background"></div>
    <div class="modal-card">
        <header class="modal-card-head">
            <p class="modal-card-title has-text-danger"><%= __("common.warning") %></p>
        </header>
        <section class="modal-card-body has-text-danger">
            <%= __("page.servers.warning.delete") %>
        </section>
        <footer class="modal-card-foot">
            <div class="buttons">
                <a class="button is-success" href="<%= linkPrefix %>/servers/<%= server._id %>/delete">
                    <span class="icon">
                        <i aria-hidden="true" class="fas fa-check-circle"></i>
                    </span>
                    <span><%= __("common.delete") %></span>
                </a>
                <button class="button is-danger" id="close-modal">
                    <span class="icon">
                        <i aria-hidden="true" class="fas fa-times-circle"></i>
                    </span>
                    <span><%= __("common.cancel") %></span>
                </button>
            </div>
        </footer>
    </div>
    <script>
        document.querySelector("a#deleteModal")?.addEventListener("click",function(event){event.preventDefault();const modal=document.querySelector(".deleteModal");const html=document.querySelector("html");modal.classList.add("is-active");html.classList.add("is-clipped");modal.querySelector(".modal-background").addEventListener("click",function(e){e.preventDefault();modal.classList.remove("is-active");html.classList.remove("is-clipped")});document.querySelector("button#close-modal").addEventListener("click",function(e){e.preventDefault();modal.classList.remove("is-active");html.classList.remove("is-clipped")})});
        (async () => {
            const invite = await (await fetch('https://discord.com/api/v8/invites/<%= server.inviteCode %>?with_counts=true')).json()
            if (!invite.channel) return
            document.querySelector('#serverName').innerText = invite.guild.name
            document.querySelector('#members').innerText = invite.approximate_member_count.toLocaleString("<%= locale %>")
            document.querySelector('#online').innerText = invite.approximate_presence_count.toLocaleString("<%= locale %>")
        })()
    </script>
</div>
<% if (req.user && req.user.db.rank.mod === true) { %>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" integrity="sha384-OHBBOqpYHNsIqQy8hL1U+8OXf9hH6QRxi0+EODezv82DfnZoV7qoHAZDwMwEJvSw" crossorigin="anonymous">
    <script src="/js/bulma-toast.min.js" async></script>
    <%- include("../../partials/isDefaultCSS/notification.ejs") %>
    <script>function copyToClipboard(t){const hideWB=document.createElement("style");hideWB.innerHTML="widgetbot-crate {display: none;}";document.body.appendChild(hideWB);const e=document.createElement("textarea");e.value=t,e.setAttribute("readonly",""),e.style={position:"absolute",left:"-9999px"},document.body.appendChild(e),e.select(),document.execCommand("copy"),document.body.removeChild(e),bulmaToast.toast({message:"Copied to clipboard",type:"is-default",position:"bottom-right",duration:2e3,opacity:.75,animate:{in:"fadeInRight",out:"fadeOutRight"}});setTimeout(()=>{hideWB.innerHTML="widgetbot-crate {display: block;}"},3000)}</script>
<% } %>
<script>const dropdowns=document.querySelectorAll(".dropdown:not(.is-hoverable)");function closeDropdowns(){dropdowns.forEach(function(o){o.classList.remove("is-active")})}dropdowns.length>0&&(dropdowns.forEach(function(o){o.addEventListener("click",function(n){n.stopPropagation(),o.classList.toggle("is-active")})}),document.addEventListener("click",function(o){closeDropdowns()})),document.addEventListener("keydown",function(o){let n=o||window.event;"Esc"!==n.key&&"Escape"!==n.key||closeDropdowns()});</script>
<%- include("../../partials/footer.ejs") %>
