<%- 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"
            }
        ]
    }
</script>
<%- include("../../partials/nav.ejs") %>
<%- include("../../partials/isDefaultCSS/button.ejs") %>
<%- include("../../partials/isDefaultCSS/pagination.ejs") %>
<section class="hero is-primary">
    <div class="hero-body">
        <div class="container has-text-centered">
            <br />
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-comments-alt fa-swap-opacity has-text-default fa-1x"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle"><%= subtitle %></h2>
            <div class="buttons is-centered">
                <a href="<%= linkPrefix %>/servers/submit" class="button is-default">
                    <span class="icon">
                        <i class="fas fa-plus"></i>
                    </span>
                    <span><%= __("common.nav.me.submitServer") %></span>
                </a>
                <a href="<%= lgbtWebURL %>" class="button is-dark" style="background-image: linear-gradient(141deg,#ff000e 0, #ff000e 16.6%, #ff5000 16.7%, #ff5000 33.3%, #fcba03 33.4%, #fcba03 49.9%, #138f3e 50%, #138f3e 66.6%, #3558a0 66.7%, #3558a0 83.3%, #880082 83.4%, #880082 100%); border: none">
                    <span>
                        <%= __("common.lgbtServers") %>
                    </span>
                </a>
            </div>
        </div>
    </div>
</section>
<div class="container is-fluid">
    <div class="section is-fluid">
        <nav class="pagination is-centered" role="navigation" aria-label="pagination">
            <a class="pagination-previous" <% if (Number(req.query.page) <= 1) { %>disabled<% } else { %>href="/servers?page=<%= Number(req.query.page) - 1 %>"<% } %>><%= __("common.pagination.previous") %></a>
            <a class="pagination-next" <% if (Number(req.query.page) >= pages) { %>disabled<% } else { %>href="/servers?page=<%= Number(req.query.page) + 1 %>"<% } %>><%= __("common.pagination.next") %></a>
            <ul class="pagination-list">
                <% if (Number(req.query.page) <= 3) { %>
                    <li>
                        <% if (Number(req.query.page) === 1) { %>
                            <a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "1") %>" aria-current="page">1</a>
                        <% } else { %> 
                            <a class="pagination-link" href="/servers?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
                        <% } %>
                    </li>
                    <% if (2 <= pages) { %>
                        <% if (Number(req.query.page) === 2) { %>
                            <a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "2") %>" aria-current="page">2</a>
                        <% } else { %> 
                            <a class="pagination-link" href="/servers?page=2" aria-label="<%= __("common.pagination.gotoPage", "2") %>">2</a>
                        <% } %>
                    <% } %>
                    <% if (3 <= pages) { %>
                        <li>
                            <% if (Number(req.query.page) === 3) { %>
                                <a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", "3") %>" aria-current="page">3</a>
                            <% } else { %> 
                                <a class="pagination-link" href="/servers?page=3" aria-label="<%= __("common.pagination.gotoPage", "3") %>">3</a>
                            <% } %>
                        </li>
                    <% } %>
                    <% if (pages > 3) { %>
                        <li>
                            <span class="pagination-ellipsis">&hellip;</span>
                        </li>
                        <li>
                            <a class="pagination-link" href="/servers?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
                        </li>
                    <% } %>
                <% } else { %>
                    <li>
                        <a class="pagination-link" href="/servers?page=1" aria-label="<%= __("common.pagination.gotoPage", "1") %>">1</a>
                    </li>
                    <li>
                        <span class="pagination-ellipsis">&hellip;</span>
                    </li>
                    <% if (Number(req.query.page) === pages) { %>
                        <li>
                            <a class="pagination-link" href="/servers?page=<%= Number(req.query.page) - 2 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 2) %>"><%= Number(req.query.page) - 2 %></a>
                        </li>
                    <% } %>
                    <li>
                        <a class="pagination-link" href="/servers?page=<%= Number(req.query.page) - 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) - 1) %>"><%= Number(req.query.page) - 1 %></a>
                    </li>
                    <li>
                        <a class="pagination-link is-current" aria-label="<%= __("common.pagination.page", req.query.page) %>" aria-current="page"><%= req.query.page %></a>
                    </li>
                    <% if (Number(req.query.page) !== pages) { %>
                        <li>
                            <a class="pagination-link" href="/servers?page=<%= Number(req.query.page) + 1 %>" aria-label="<%= __("common.pagination.gotoPage", Number(req.query.page) + 1) %>"><%= Number(req.query.page) + 1 %></a>
                        </li>
                    <% } %>
                    <% if (Number(req.query.page <= (pages - 2))) { %>
                        <li>
                            <span class="pagination-ellipsis">&hellip;</span>
                        </li>
                        <li>
                            <a class="pagination-link" href="/servers?page=<%= pages %>" aria-label="<%= __("common.pagination.gotoPage", pages) %>"><%= pages %></a>
                        </li>
                    <% } %>
                <% } %>
            </ul>
        </nav>
        <br />
        <div class="columns is-multiline is-centered">
            <% if (!servers || servers.length === 0) { %>
                <h2 class="is-size-3"><%= __("common.error.fetchFail.servers") %></h2>
            <% } else { %>
                <% if (!serversPgArr || serversPgArr.length === 0) { %>
                    <h2 class="is-size-3"><%= __("common.error.fetchFail.servers") %></h2>
                <% } else { %>
                    <%- serversPgArr.map(server => include("../../partials/cards/serverCard.ejs", { server, search: false, profile: false, queue: false })).join("") %>
                <% } %> 
            <% } %>
        </div>

    </div>
</div>
<%- include("../../partials/footer.ejs") %>