<%- 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-black">
    <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="<%= defaultWebURL %>/img/lgbt-354px.<%= imageFormat %>" type="image/<%= imageFormat %>" >
            <h1 class="title">
                <%= __("common.del") %>
            </h1>
            <h2 class="subtitle">
                <%= __("common.del.subtitle") %>
            </h2>
        </div>
    </div>
</section>
<div class="container">
    <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-rainbow fa-1x"></i>
                </span>
                <span><%= __("common.lgbtServers.random") %></span>
            </h2>
            <br />
            <div class="columns is-multiline is-centered">
                <%- servers.map(server => include("../partials/cards/serverCard.ejs", { server, search: false, profile: false })).join("") %>
            </div>
        <% } %>
        <div style="padding-top: 15px;">
            <a href="/servers" class="button is-default is-large is-fullwidth is-outlined" style="height: auto; white-space: pre-wrap">
                <span class="icon">
                    <i aria-hidden="true" class="fad fa-cloud-rainbow fa-1x"></i>
                </span>
                <span><%= __("common.lgbtServers.more") %></span>
            </a>
        </div>
    </div>
</div>    
<%- include("../partials/footer.ejs") %>