<%- 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 %>"
            }
        ]
    }
</script>

<%- include("../partials/isDefaultCSS/button.ejs") %>
<%- include("../partials/nav.ejs") %>
<section class="hero is-primary">
    <div class="hero-body">
        <br />
        <div class="container has-text-centered">
            <img id="delLogo" draggable=false alt="DEL Logo" style="padding: 5px; width: 128px; height: 128px; border-radius: 50%;" src="/img/logo-128px.webp" type="image/webp" >
            <h1 class="title" style="overflow: hidden;">
                <%= __("common.del") %>
            </h1>
            <h2 class="subtitle">
                <%= __("common.del.subtitle") %>
            </h2>
        </div>
    </div>
</section>
<div class="container">
    <div class="section">
        <% if (!bots || bots.length === 0) { %>
            <h2 class="is-size-3"><%= __("common.error.fetchFail.bots") %></h2>
        <% } else { %>
            <h2 class="is-size-3 has-text-centered has-text-default">
                <span onclick="invokeSeizureMode();" class="icon is-medium iconalign">
                    <i class="fad fa-robot fa-1x"></i>
                </span>
                <span><%= __("common.bots.random") %></span>
            </h2>
            <br />
            <div class="columns is-multiline is-centered">
                <%- bots.map(bot => include("../partials/cards/botCard.ejs", { bot, search: false, queue: false, inviteQueue: false, archived: false, verificationApp: false, profile: false })).join("") %>
            </div>
        <% } %>
    </div>
    <div class="section">
        <% if (!servers || servers.length === 0) { %>
            <h2 class="is-size-3"><%= __("common.error.fetchFail.servers") %></h2>
        <% } else { %>
            <h2 class="is-size-3 has-text-centered has-text-default">
                <span class="icon is-medium iconalign">
                    <i class="fad fa-comments-alt fa-swap-opacity fa-1x"></i>
                </span>
                <span><%= __("common.servers.random") %></span>
            </h2>
            <br />
            <div class="columns is-multiline is-centered">
                <%- servers.map(server => include("../partials/cards/serverCard.ejs", { server, search: false, profile: false, queue: false })).join("") %>
            </div>
        <% } %>
    </div>
    <div class="section">
        <% if (!templates || templates.length === 0) { %>
            <h2 class="is-size-3"><%= __("common.error.fetchFail.templates") %></h2>
        <% } else { %>
            <h2 class="is-size-3 has-text-centered has-text-default">
                <span class="icon is-medium iconalign">
                    <i class="fad fa-clone fa-1x"></i>
                </span>
                <span><%= __("common.templates.random") %></span>
            </h2>
            <br />
            <div class="columns is-multiline is-centered">
                <%- templates.map(template => include("../partials/cards/templateCard.ejs", { template, search: false, profile: false })).join("") %>
            </div>
        <% } %>
    </div>
</div>    
<%- include("../partials/footer.ejs") %>