<%- 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": "User",
                "item": "<%= baseURL %><%= linkPrefix %>/users"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "<%= userProfile.fullUsername %>",
                "item": "<%= baseURL %><%= linkPrefix %>/users/<%= userProfile._id %>"
            }
        ]
    }
</script>
<%- include("../../partials/nav.ejs"); %>
<% if (userProfile.rank.premium === true || userProfile.rank.mod === true) { %>
    <style>
        <%= userProfile.profile.css %>
    </style>
<% } %>

<%- include("../../partials/isDefaultCSS/button.ejs") %>
<style>.tag:not(body){color: <%= foreground %>;background-color: <%= defaultColour %>;}</style>
<section class="hero is-primary">
    <div class="hero-body">
        <br>
        <div class="container">
            <div class="columns">
                <div class="column is-2">
                    <% 
                        let statusInfo;
                        if (userStatus === "online") statusInfo = __("page.users.status.online")
                        if (userStatus === "idle") statusInfo = __("page.users.status.idle")
                        if (userStatus === "dnd") statusInfo = __("page.users.status.dnd")
                        if (userStatus === "offline") statusInfo = __("page.users.status.offline")
                    %> 
                    <img class="image" title="<%= statusInfo %>" style="margin: auto; width: 128px; border-radius: 50%; animation: <%= userStatus %> 2s infinite !important;" src="<%= userProfile.avatar.hash ? userProfile.avatar.url : `${baseURL}/img/defaultavatar` %>.<% if (userProfile.avatar.hash) { %><%= userProfile.avatar.hash.startsWith('a_') ? 'gif' : imageFormat %><% } else { %><%= imageFormat %><% } %>?size=256" alt="<%= userProfile.fullUsername %>'s Avatar" onerror="this.onerror = null;this.src = '/img/defaultavatar.<%= imageFormat %>';console.log('Failed to load item\'s avatar/icon, using default instead.');" >
                </div>
                <div class="column is-10">
                    <h1 class="is-size-1 <% if (mobile) { %>has-text-centered<% } %>">
                        <% if (!phone) { %>
                            <span id="userName" style="overflow-wrap: break-word;"><%= userProfile.fullUsername %></span>
                        <% } %>
                        <% if (userProfileIsBanned === true || userProfile.rank.tester === true || userProfile.rank.translator === true || userProfile.rank.premium === true || userProfile.rank.mod === true || userProfile.rank.admin === true) { %>
                            <% if (userProfileIsBanned === true) { %>
                                <span style="vertical-align: middle;" title="<%= __("common.rank.banned") %>" class="icon is-medium is-size-3 iconalign">
                                    <i aria-hidden="true" class="fad fa-ban has-text-danger fa-1x"></i>
                                </span>
                            <% } else { %>
                                <% if (userProfile.rank.premium === true) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.donator") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fas fa-heart has-text-red fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.covid === true) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.covid") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-shield-virus has-text-magenta fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.tester === true) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.tester") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-vial has-text-link fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.translator === true) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.translator") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-globe has-text-info fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.mod === true) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.mod") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-hammer has-text-success fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.assistant === true ) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.assistant") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-tools has-text-orange fa-1x"></i>
                                    </span>
                                <% } %>
                                <% if (userProfile.rank.admin === true ) { %>
                                    <span style="vertical-align: middle;" title="<%= __("common.rank.admin") %>" class="icon is-medium is-size-3 iconalign">
                                        <i aria-hidden="true" class="fad fa-crown has-text-danger fa-1x"></i>
                                    </span>
                                <% } %>
                            <% } %>

                            <% if (phone) { %><br><% } %>
                        <% } %> 
                        <% if (phone) { %>
                            <span id="userName" style="overflow-wrap: break-word;"><%= userProfile.fullUsername %></span>
                        <% } %>
                    </h1>
                    <% if (userProfileIsBanned === false) { %><h2 class="subtitle <% if (mobile) { %>has-text-centered<% } %>"><% if (userProfile.rank.admin === true) { %><%- userProfile.profile.bio %><% } else { %><%= userProfile.profile.bio || __("page.users.bio.nil") %><% } %></h2><% } %>
                    <% if (userProfileIsBanned === false || user && user.db.rank.mod === true) { %>
                        <% if (user && user.db.rank.mod === true || user && userProfile._id === user.id) { %>
                            <div class="buttons page <% if (mobile) { %>is-centered<% } %>">
                                <% if (userProfile._id === user.id) { %>
                                    <%- 
                                        include("../../partials/button.ejs", { 
                                            className: "button is-success",
                                            icon: "fas fa-sync-alt",
                                            tag: "a",
                                            message: __("common.sync"),
                                            href: `${linkPrefix}/users/${userProfile._id}/sync`,
                                            additional: ""
                                        });
                                    %>
                                    <%- 
                                        include("../../partials/button.ejs", { 
                                            className: "button is-warning", 
                                            icon: "fas fa-pencil", 
                                            tag: "a", 
                                            message: __("common.edit"), 
                                            href: `${linkPrefix}/users/profile/@me/edit`, 
                                            additional: ""
                                        });
                                    %>
                                <% } %>
                                <% if (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 <% if (mobile) { %>has-text-centered<% } %>"><%= __("common.staffManagement.warning") %></p>
                                            </div>
                                            <hr class="dropdown-divider">
                                            <a class="dropdown-item has-text-success" href="<%= linkPrefix %>/users/<%= userProfile._id %>/sync">
                                                <span class="icon">
                                                    <i aria-hidden="true" class="fas fa-sync-alt"></i>
                                                </span>
                                                <span><%= __("common.sync") %></span>
                                            </a>
                                            <% if (user.db.rank.assistant === true) { %>
                                                <a class="dropdown-item has-text-warning" href="<%= linkPrefix %>/users/profile/<%= userProfile._id %>/edit">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-pen"></i></span>
                                                    <span><%= __("common.edit") %></span>
                                                </a>
                                                <a class="dropdown-item has-text-orange" href="<%= linkPrefix %>/users/<%= userProfile._id %>/rank">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-crown"></i></span>
                                                    <span><%= __("page.users.modifyRank") %></span>
                                                </a>
                                            <% } %>
                                            <a class="dropdown-item" onclick="copyToClipboard('<%= userProfile._id %>');">
                                                <span class="icon"><i aria-hidden="true" class="fas fa-copy"></i></span>
                                                <span><%= __("common.copyID") %></span>
                                            </a>
                                          </div>
                                        </div>
                                      </div>
                                <% } %>
                            </div>
                        <% } %>
                        <div class="buttons page <% if (mobile) { %>is-centered<% } %>">
                            <% if (userProfile.profile.links.website) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-link", 
                                        icon: "fas fa-globe", 
                                        tag: "a", 
                                        message: __("common.website"), 
                                        href: userProfile.profile.links.website, 
                                        additional: "target=\"_blank\" rel=\"noopener\""
                                    });
                                %>
                            <% } %>
                            <% if (userProfile.profile.links.twitter) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-info", 
                                        icon: "fab fa-twitter", 
                                        tag: "a", 
                                        message: __("common.social.twitter"), 
                                        href: `https://twitter.com/@${userProfile.profile.links.twitter}`, 
                                        additional: "target=\"_blank\" rel=\"noopener\""
                                    });
                                %>
                            <% } %>
                            <% if (userProfile.profile.links.instagram) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-magenta", 
                                        icon: "fab fa-instagram", 
                                        tag: "a", 
                                        message: __("common.social.instagram"), 
                                        href: `https://instagram.com/${userProfile.profile.links.instagram}`, 
                                        additional: "target=\"_blank\" rel=\"noopener\""
                                    });
                                %>
                            <% } %>
                            <% if (userProfile.profile.links.snapchat) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-warning", 
                                        icon: "fab fa-snapchat-ghost", 
                                        tag: "a", 
                                        message: __("common.social.snapchat"), 
                                        href: `https://www.snapchat.com/add/${userProfile.profile.links.snapchat}`, 
                                        additional: "target=\"_blank\" rel=\"noopener\""
                                    });
                                %>
                            <% } %>
                            <% if (userProfile.profile.links.gitlab) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-orange", 
                                        icon: "fab fa-gitlab", 
                                        tag: "a", 
                                        message: __("common.social.gitlab"), 
                                        href: `https://gitlab.com/${userProfile.profile.links.gitlab}`, 
                                        additional: "target=\"_blank\" rel=\"noopener\""
                                    });
                                %>
                            <% } %>
                            <% if (userProfile.profile.links.github) { %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-dark", 
                                        icon: "fab fa-github", 
                                        tag: "a", 
                                        message: __("common.social.github"), 
                                        href: `https://github.com/${userProfile.profile.links.github}`, 
                                        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-default", 
                                    title: __("page.users.snakeHS"),
                                    content: userProfile.game.snakes.maxScore,
                                    type: "multi"
                                });
                            %>
                        </div>
                    </div>
                </div>
            <% } %>
        </div>
    </div>
</section>
<div class="container">
    <div class="section has-text-centered">
            <% if (userProfileIsBanned && req.user && req.user.db.rank.mod === false || userProfileIsBanned && !req.user) { %>
                    <h2 class="is-size-4"><%= __("common.unavailable") %></h2>
            <% } else if (botsOwner.length === 0 && botsEditor.length === 0 && serversOwner.length === 0 && templatesOwner.length === 0) { %>
                <h2 class="is-size-4"><%= __("page.users.listings.nil") %></h2>
            <% } else { %>
                <% if (botsOwner.length !== 0 || botsEditor.length !== 0) { %>
                    <h2 class="is-size-3"><%= __("common.bots") %></h2>
                    <% if (botsOwner.length !== 0) { %>
                        <br>
                        <h3 class="is-size-4"><%= __("common.owner") %></h3>
                        <br>
                        <div class="columns is-multiline is-centered">
                            <%- botsOwner.map(bot => include("../../partials/cards/botCard.ejs", { bot, search: false, queue: false, inviteQueue: false, archived: false, verificationApp: false, profile: true })).join("") %>
                        </div>
                    <% } %>
                    <% if (botsEditor.length !== 0) { %>
                        <br>
                        <h3 class="is-size-4"><%= __("common.editor") %></h3>
                        <br>
                        <div class="columns is-multiline is-centered">
                            <%- botsEditor.map(bot => include("../../partials/cards/botCard.ejs", { bot, search: false, queue: false, inviteQueue: false, archived: false, verificationApp: false, profile: true })).join("") %>
                        </div>
                    <% } %>
                <% } %>
                <br>
                <% if (serversOwner.length !== 0) { %>
                    <h2 class="is-size-3"><%= __("common.servers") %></h2>
                    <br>
                    <div class="columns is-multiline is-centered">
                        <%- serversOwner.map(server => include("../../partials/cards/serverCard.ejs", { server, search: false, profile: true, queue: false })).join("") %>
                    </div>
                <% } %>
                <br>
                <% if (templatesOwner.length !== 0) { %>
                    <h2 class="is-size-3"><%= __("common.templates") %></h2>
                    <br>
                    <div class="columns is-multiline is-centered">
                        <%- templatesOwner.map(template => include("../../partials/cards/templateCard.ejs", { template, search: false, profile: true })).join("") %>
                    </div>
                <% } %>
            <% } %>
            <% if (user && (user.id === userProfile._id || user.db.rank.mod)) { %>
                <% if (hiddenBots.length > 0) { %>
                    <br>
                    <h2 id="archived-bots" class="is-size-4"><%= __("page.users.listings.hiddenBots") %></h2>
                    <br>
                    <div class="columns is-multiline is-centered">
                        <%- hiddenBots.map(bot => include("../../partials/cards/botCard.ejs", { bot, search: false, queue: false, inviteQueue: false, hidden: true, verificationApp: false, profile: false })).join("") %>
                    </div>
                <% } %>
                <% if (archivedBots.length > 0) { %>
                    <br>
                    <h2 id="archived-bots" class="is-size-4"><%= __("page.users.listings.archivedBots") %></h2>
                    <br>
                    <div class="columns is-multiline is-centered">
                        <%- archivedBots.map(bot => include("../../partials/cards/botCard.ejs", { bot, search: false, queue: false, inviteQueue: false, archived: true, verificationApp: false, profile: false })).join("") %>
                    </div>
                <% } %>
            <% } %>
    </div>
</div>
<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)}
        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") %>
