<%- include("../../partials/header.ejs") %>
<%- include("../../partials/nav.ejs") %>
<% 
    let defaultColour = "#BA2EFF";
    let foreground = "#ffffff";

    if (req.user) {
        defaultColour = req.user.db.preferences.defaultColour || "#BA2EFF"
        foreground = req.user.db.preferences.defaultForegroundColour || "#ffffff"
    }
%>
<%- include("../../partials/isDefaultCSS/button.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-archive has-text-default fa-1x"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle"><%= subtitle %></h2>
        </div>
    </div>
</section>
<div class="container is-fluid">
    <div class="section is-fluid">
        <%- include("../../partials/pagination.ejs", { linkLocation: "staff/audit" }) %>
        <br />
        <% if (logs.length === 0) { %>
            <h2 class="is-size-3"><%= __("common.error.fetchFail.logs") %></h2>
        <% } else { %>
            <% if (logsPgArr.length === 0) { %>
                <h2 class="is-size-3"><%= __("common.error.fetchFail.logs") %></h2>
            <% } else { %>
                <%- logsPgArr.map(log => include("../../partials/cards/log.ejs", { log, defaultColour })).join("") %>
            <% } %> 
        <% } %>
        <br />
        <%- include("../../partials/pagination.ejs", { linkLocation: "staff/audit" }) %>
    </div>
</div>
<style>
    .str {
        color: #ff8d00;
    }
    .kwd {
        color: #1bff2d;
    }
    .clo, .opn, .pun {
        color: #5089ff;
    }
    .lit {
        color: #c395ff;
    }
    code {
        font-family: "Cascadia Code", monospace;
    }
</style>
<script>
    function toggleShowRaw(log) {
        const logDocument = document.getElementById(`rawLOG-${log}`);
        document.getElementById(`rawLOG-${log}`).style.display === "none" ? logDocument.style.display = "block" : logDocument.style.display = "none";
    }
</script>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<%- include("../../partials/footer.ejs") %>