<%- include("../../partials/header.ejs") %>
<link href="/css/theme/<%= preferredTheme %>/listing.css?v=<%= cssVersion %>" media="screen, print" rel="stylesheet" />
<% if (longDesc) { %><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js" integrity="sha512-/DXTXr6nQodMUiq+IUJYCt2PPOUjrHJ9wFrqpJ3XkgPNOZVfMok7cRw6CSxyCQxXn6ozlESsSh1/sMCTF1rL/g==" crossorigin="anonymous"></script><% } %>
<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": "Templates",
                "item": "<%= baseURL %><%= linkPrefix %>/templates"
            },
            {
                "@type": "ListItem",
                "position": 2,
                "name": "<%= template.name %>",
                "item": "<%= baseURL %><%= linkPrefix %>/templates/<%= template._id %>"
            }
        ]
    }
</script>

<%- include("../../partials/nav.ejs") %>
<style>.tag:not(body).is-default{background-color:<%= defaultColour %>;color:<%= foreground %>}</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="<%= template.name %>'s Icon'" style="margin: auto; width: 128px; border-radius: 50%;" src="<%= template.icon.hash ? template.icon.url : `${baseURL}/img/defaultavatar` %>.<%= imageFormat %>?size=512" alt="<%= template.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<% } %>">
                        <span id="templateName"><%= template.name %></span>
                    </h1>
                    <h2 class="subtitle <% if (mobile) { %>has-text-centered<% } %>"><%= template.shortDesc %></h2>
                    <% if (req.user) { %>
                        <div class="buttons page <% if (mobile) { %>is-centered<% } %>">
                            <% if (template.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}/templates/${template._id}/sync`, 
                                        additional: ""
                                    });
                                %>
                                <%- 
                                    include("../../partials/button.ejs", { 
                                        className: "button is-warning", 
                                        icon: "fas fa-pencil", 
                                        tag: "a", 
                                        message: __("common.edit"), 
                                        href: `${linkPrefix}/templates/${template._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 (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 %>/templates/<%= template._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 %>/templates/<%= template._id %>/edit">
                                                    <span class="icon"><i aria-hidden="true" class="fas fa-pencil"></i></span>
                                                    <span><%= __("common.edit") %></span>
                                                </a>
                                            <% } %>
                                            <a class="dropdown-item has-text-danger" href="<%= linkPrefix %>/templates/<%= template._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('<%= template._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('<%= template.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<% } %>">
                        <a target="_blank" href="<%= template.links.template %>" class="button is-link">
                            <span class="icon">
                                <i aria-hidden="true" class="fas fa-clone"></i>
                            </span>
                            <span><%= __("page.templates.useTemplate") %></span>
                        </a>
                    </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-template",
                                type: "multi"
                            });
                        %>
                        <%- 
                        include("../../partials/tag.ejs", { 
                            contentColour: "is-info", 
                            title: __("common.creator"),
                            content: "insCreator-template",
                            type: "multi"
                        });
                    %>
                        <%- 
                            include("../../partials/tag.ejs", { 
                                contentColour: "is-success", 
                                title: __("page.templates.used"),
                                content: __("page.templates.used.times", template.usageCount.toLocaleString(locale)),
                                type: "multi",
                                id: 'uses'
                            });
                        %>
                    </div>
                    <% if (template.tags && template.tags.length > 0) { %>
                        <div class="field is-grouped is-grouped-multiline <% if (mobile) { %>is-grouped-centered<% } %>">
                            <% if (template.tags.includes("Gaming")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-link", 
                                        title: "",
                                        content: __("common.tags.gaming"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Music")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-info", 
                                        title: "",
                                        content: __("common.tags.music"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Media & Entertainment")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-success", 
                                        title: "",
                                        content: __("common.tags.mediaEntertainment"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Creative Arts")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-orange", 
                                        title: "",
                                        content: __("common.tags.creativeArts"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Science & Tech")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-danger", 
                                        title: "",
                                        content: __("common.tags.scienceTech"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Education")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-magenta", 
                                        title: "",
                                        content: __("common.tags.education"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Fashion & Beauty")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-pink", 
                                        title: "",
                                        content: __("common.tags.fashionBeauty"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Relationships & Identity")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-link", 
                                        title: "",
                                        content: __("common.tags.relationshipIdentity"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Fitness & Health")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-info", 
                                        title: "",
                                        content: __("common.tags.fitnessHealth"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Travel & Food")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-success", 
                                        title: "",
                                        content: __("common.tags.travelFood"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                            <% if (template.tags.includes("Finance")) { %>
                                <%- 
                                    include("../../partials/tag.ejs", { 
                                        contentColour: "is-orange", 
                                        title: "",
                                        content: __("common.tags.finance"),
                                        type: "tag"
                                    });
                                %>
                            <% } %>
                        </div>
                    <% } %>
                </div>
            </div>
        </div>
    </div>
</section> 
<div class="container" style="overflow: hidden;">
    <br />
    <div class="column is-12 tabs is-boxed">
        <ul>
            <% if (longDesc) { %>
                <li style="direction: ltr;" class="is-active">
                    <a>
                        <% if (htmlDir !== "rtl") { %>
                            <span class="icon is-small">
                                <i class="fas fa-align-center" aria-hidden="true"></i>
                            </span>
                        <% } %>
                        <span><%= __("common.description") %></span>
                        <% if (htmlDir === "rtl") { %>
                            <span class="icon is-small">
                                <i class="fas fa-align-center" aria-hidden="true"></i>
                            </span>
                        <% } %>
                    </a>
                </li>
            <% } %>
            <li style="direction: ltr;" <% if (!longDesc) { %>class="is-active"<% } %>>
                <a>
                    <% if (htmlDir !== "rtl") { %>
                        <span class="icon is-small">
                            <i class="fas fa-info-circle" aria-hidden="true"></i>
                        </span>
                    <% } %>
                    <span><%= __("page.templates.details") %></span>
                    <% if (htmlDir === "rtl") { %>
                        <span class="icon is-small">
                            <i class="fas fa-info-circle" aria-hidden="true"></i>
                        </span>
                    <% } %>
                </a>
            </li>
        </ul>
        </div>
        <div class="column is-12 tabs-content">
            <% if (longDesc) { %>
                <div class="tab-content is-active content" style="white-space: pre-wrap">
                    <%- longDesc %>
                </div>
            <% } %>
            <div class="tab-content <% if (!longDesc) { %>is-active<% } %>">
                <div class="columns">
                    <div class="column is-one-third">
                        <div class="columnBody infoColumn">
                            <h4 class="is-size-4" onclick="collapseToggle(document.getElementById('channelListBody'), document.getElementById('channelListArrow'));">
                                <span><%= __("page.templates.channels") %></span>
                                <% if (phone) { %>
                                    <span>
                                        <i id="channelListArrow" class="fas fa-chevron-left dropdown-arrow" aria-hidden="true"></i>
                                    </span>
                                <% } %>
                            </h4>
                            <div id="channelListBody" class="is-hidden-mobile">
                                <div id="channelList" style="margin-left: 5px">
                                    <%- template.channels.map(channel => include("../../partials/channels.ejs", { channel })).join("") %>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column is-one-third">
                        <div class="columnBody infoColumn">
                            <h4 class="is-size-4" onclick="collapseToggle(document.getElementById('rolesListBody'), document.getElementById('rolesArrow'));">
                                <span><%= __("page.templates.roles") %></span>
                                <% if (phone) { %>
                                    <span>
                                        <i id="rolesArrow" class="fas fa-chevron-left dropdown-arrow" aria-hidden="true"></i>
                                    </span>
                                <% } %>
                            </h4>
                            <div id="rolesListBody" class="is-hidden-mobile">
                                <div>
                                    <% if (template.roles.length === 1) { %>
                                        None
                                    <% } else { %>
                                        <%- template.roles.reverse().filter(r => r.name !== '@everyone').map(role => include("../../partials/roles.ejs", { role })).join("") %>
                                    <% } %>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="column is-one-third">
                        <div class="columnBody infoColumn">
                            <h4 class="is-size-4" onclick="collapseToggle(document.getElementById('optionsBody'), document.getElementById('optionsArrow'));">
                                <span><%= __("page.templates.otherInfo") %></span>
                                <% if (phone) { %>
                                    <span>
                                        <i id="optionsArrow" class="fas fa-chevron-left dropdown-arrow" aria-hidden="true"></i>
                                    </span>
                                <% } %>
                            </h4>
                            <div id="optionsBody" class="is-hidden-mobile">
                                <div id="otherInfo">
                                    <p><strong><%= __("page.templates.otherInfo.region") %></strong> <img src="https://discord.com/assets/<%= functions.regionIcon(template.region) %>.png" alt="" style="height: 1em; vertical-align: middle"> <%= functions.parseRegion(template.region) %></p>
                                    <p><strong><%= __("page.templates.otherInfo.afkTimeout") %></strong> <%= Math.floor(template.afkTimeout / 60) %>m</p>
                                    <%- include("../../partials/verificationLevel.ejs") %>
                                    <%- include("../../partials/msgNotifications.ejs") %>
                                    <%- include("../../partials/explicitFilter.ejs") %>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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.templates.warning.delete") %>
        </section>
        <footer class="modal-card-foot">
            <div class="buttons">
                <a class="button is-success" href="<%= linkPrefix %>/templates/<%= template._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 template = await (await fetch('https://discord.com/api/v8/guilds/templates/<%= template._id %>')).json()
            if (!template.name) return
            document.querySelector('#templateName').innerText = template.name
            document.querySelector('#uses').innerText = '<%= __("page.templates.used.times") %>'.replace('%s', template.usage_count.toLocaleString("<%= locale %>"))
        })()
    </script>
</div>
<% if (phone) { %>
    <!-- <style>#collapsibleBody1, #collapsibleBody2, #collapsibleBody3 { display: none }</style> -->
    <script>
        function collapseToggle(s, i) {
            s
                .classList
                .contains("is-hidden-mobile")
                ? s
                    .classList
                    .remove("is-hidden-mobile")
                : s
                    .classList
                    .add("is-hidden-mobile"),
            i
                .classList
                .contains("fa-chevron-left")
                ? (i.classList.remove("fa-chevron-left"), i.classList.add("fa-chevron-down"))
                : (i.classList.add("fa-chevron-left"), i.classList.remove("fa-chevron-down"))
        }
        // , i.style.right = "16px"
        //, i.style.right = "18.4px"
    </script>
<% } %>
<% 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>
<% if (longDesc) { %><script>$(".tabs").each(function(index){var $tabParent=$(this);var $tabs=$tabParent.find("li");var $contents=$tabParent.next(".tabs-content").find(".tab-content");$tabs.click(function(){var curIndex=$(this).index();$tabs.removeClass("is-active");$tabs.eq(curIndex).addClass("is-active");$contents.removeClass("is-active");$contents.eq(curIndex).addClass("is-active")})});</script><% } %>
<%- include("../../partials/footer.ejs") %>
