<%- include("../../partials/header.ejs") %>
<%- include("../../partials/nav.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": "Documentation",
                "item": "<%= baseURL %><%= linkPrefix %>/docs"
            }
        ]
    }
</script>

<style>
.menu-list a.is-active {
    background-color: <%= defaultColour %>;
    color: <%= foreground %>;
}
.menu-list a:hover {
    background-color: <%= siteThemeColour %>;
    color: <%= defaultColour %>;
}
    pre {
        background: <%= siteThemeColour %>;
    }
    code {
        padding: 5px;
    }
</style>
<section class="hero is-primary">
    <div class="hero-body">
        <br />
        <div class="container has-text-centered">
            <h1 class="title">
                <span class="icon is-medium iconalign">
                    <i aria-hidden="true" class="fad fa-books has-text-default fa-1x"></i>
                </span>
                <br />
                <span><%= title %></span>
            </h1>
            <h2 class="subtitle"><%= subtitle %></h2>
        </div>
    </div>
    </section>
    <div class="container section columns">
        <div class="column is-one-quarter">
            <aside class="menu">
                <p class="menu-label">
                    <%= __("docs.label.main") %>
                </p>
                <ul class="menu-list">
                    <li>
                        <a id="introNav" href="#intro" style="display: block;" class="is-active" onclick="changeBody('intro');">
                            <%= __("docs.intro") %>
                        </a>
                    </li>
                    <li>
                        <a id="referenceNav" href="#references" onclick="changeBody('reference');">
                            <%= __("docs.reference") %>
                        </a>
                    </li>
                </ul>
                <p class="menu-label">
                    <%= __("docs.label.api") %>
                </p>
                <ul class="menu-list">
                    <li>
                        <a id="routesNav" href="#api-routes" onclick="changeBody('routes');">
                            <%= __("docs.routes") %>
                        </a>
                        <!--<a id="librariesNav" href="#api-libraries" onclick="changeBody('libraries');">
                            <%= __("docs.libraries") %>
                        </a>-->
                        <a id="examplesNav" href="#api-examples" onclick="changeBody('examples');">
                            <%= __("docs.examples") %>
                        </a>
                    </li>
                </ul>
              </aside>
        </div>
        <div class="column is-three-quarters content">
            <%- include("./intro.ejs") %>
            <%- include("./reference.ejs") %>
            <%- include("./v2/routes.ejs") %>
            <%- include("./v2/libraries.ejs") %>
            <%- include("./v2/examples.ejs") %>
        </div>
    </div>
    <script>
        if (window.location.href.includes("#references")) changeBody("reference");
        if (window.location.href.includes("#api-routes")) changeBody("routes");
        if (window.location.href.includes("#api-libraries")) changeBody("libraries");
        if (window.location.href.includes("#api-examples")) changeBody("examples");

        function changeBody(id) {
            const bodies = ["intro", "reference", "routes", /*"libraries",*/ "examples"];
            for (const div of bodies) {
                document.getElementById(div).style.display = "none";
                document.getElementById(`${div}Nav`).classList.remove("is-active");
            }

            document.getElementById(id).style.display = "block";
            document.getElementById(`${id}Nav`).classList.add("is-active");
        }
    </script>
    <script src="/js/prism.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@widgetbot/crate@3" async defer>
        const crate = new Crate({
          server: "<%= settings.guild.main %>",
          channel: "<%= settings.channels.docsDefault %>",
          shard: "<%= settings.widgetbotv3 %>"
        });
        crate.notify({
            content: "Feel free to send a message if you need community support!",
            timeout: 5000,
            avatar: "<%= baseURL %>/img/logo-128px.png"
        });
    </script>
    <style>
        <% if (preferredTheme === "dark" || preferredTheme === "black") { %>
            /*! GitHub: Twilight */.CodeMirror,.highlight{background:<%= siteThemeColour %>!important;color:#ccc!important}.blob-code,.blob-code-inner{color:#ccc!important}.pl-c,.pl-c span{color:#5b6270!important;font-style:italic!important}.pl-c1{color:#d19965!important}.pl-sr .pl-cce{color:#56b5c2!important;font-weight:400!important}.pl-cn{color:#d19965!important}.pl-e{color:#d19965!important}.pl-ef{color:#61afef!important}.pl-en{color:#d19965!important}.pl-enc{color:#e4bf7a!important}.pl-enf{color:#61afef!important}.pl-enm{color:#aab1bf!important}.pl-ens{color:#be5046!important}.pl-ent{color:#df6b75!important}.pl-entc{color:#e4bf7a!important}.pl-enti{color:#56b5c2!important}.pl-entm{color:#df6b75!important}.pl-eoa{color:#d19965!important}.pl-eoac{color:#d19965!important}.pl-eoac .pl-pde{color:#d19965!important}.pl-eoai{color:#61afef!important}.pl-eoi{color:#97c279!important}.pl-k{color:#c578dd!important}.pl-ko{color:#aab1bf!important}.pl-kolp{color:#c578dd!important}.pl-kos{color:#61afef!important}.pl-kou{color:#d19965!important}.pl-mai .pl-sf{color:#56b5c2!important}.pl-mb{color:#d19965!important;font-weight:700!important}.pl-mc{color:#c578dd!important}.pl-mh{color:#df6b75!important}.pl-mh .pl-pdh{color:#61afef!important}.pl-mi{color:#c578dd!important;font-style:italic!important}.pl-ml{color:#56b5c2!important}.pl-mm{color:#d19965!important}.pl-mp{color:#818896!important}.pl-mp1 .pl-sf{color:#aab1bf!important}.pl-mq{color:#d19965!important}.pl-mr{color:#61afef!important}.pl-ms{color:#aab1bf!important}.pl-pdb{color:#e4bf7a!important;font-weight:700!important}.pl-pdc{color:#5b6270!important;font-style:italic!important}.pl-pdc1{color:#aab1bf!important}.pl-pde{color:#c578dd!important}.pl-pdi{color:#c578dd!important;font-style:italic!important}.pl-pds{color:#97c279!important}.pl-pdv{color:#df6b75!important}.pl-pse .pl-s1{color:#97c279!important}.pl-pse .pl-s2{color:#e4bf7a!important}.pl-s{color:#97c279!important}.pl-s1{color:#97c279!important}.pl-s2{color:#e4bf7a!important}.pl-mp .pl-s3{color:#d19965!important}.pl-s3{color:#d19965!important}.pl-sc{color:#e4bf7a!important}.pl-scp{color:#aab1bf!important}.pl-sf{color:#56b5c2!important}.pl-smc{color:#aab1bf!important}.pl-smi{color:#df6b75!important}.pl-smp{color:#e4bf7a!important}.pl-sok{color:#d19965!important}.pl-sol{color:#df6b75!important}.pl-som{color:#aab1bf!important}.pl-sr{color:#56b5c2!important}.pl-sr .pl-sra{color:#56b5c2!important}.pl-src{color:#56b5c2!important}.pl-sr .pl-sre{color:#e4bf7a!important}.pl-st{color:#56b5c2!important}.pl-stj{color:#e4bf7a!important}.pl-stp{color:#818896!important}.pl-sv{color:#d19965!important}.pl-v{color:#e4bf7a!important}.pl-vi{color:#be5046!important}.pl-vo{color:#56b5c2!important}.pl-vpf{color:#aab1bf!important}.pl-mi1{color:#97c279!important;background:#020!important}.pl-mdht{color:#97c279!important;background:#020!important}.pl-md{color:#df6b75!important;background:#200!important}.pl-mdhf{color:#df6b75!important;background:#200!important}.pl-mdr{color:#aab1bf!important;font-weight:400!important}.pl-mdh{color:#df6b75!important;font-weight:400!important}.pl-mdi{color:#df6b75!important;font-weight:400!important}.pl-corl{color:#df6b75!important;text-decoration:underline!important}.pl-ib{background-color:#df6b75!important}.pl-bu,.pl-ii{background-color:#e05151!important}.pl-mo{color:#aab1bf!important}.pl-mri{color:#97c279!important}.pl-ms1{color:#aab1bf!important;background-color:#373b41!important}.pl-va{color:#aab1bf!important}.pl-vpu{color:#aab1bf!important}.pl-entl{color:#df6b75!important}.pl-token.active,.pl-token:hover{background:#61afef!important;color:<%= siteThemeColour %>!important}
        <% } else { %>
            .gist .blob-code, .gist .blob-num {
                background: <%= siteThemeColour %>;
            }
        <% } %>
  /* auto-generated rule for "background: #fafbfc" */
  .facebox-footer, ul.comparison-list > li.title,
  .getting-started .list-group-item:hover,
  .getting-started .list-group-item:focus,
  .discussion-post .timeline-inline-comments,
  .discussion-post .reply-comment .review-comment.is-comment-editing,
  .MarketplaceEdit-body .menu-item {
    background: #181818 !important;
  }
  /* auto-generated rule for "background: #f6f8fa" */
  .avatar.avatar-more, .AvatarStack--right .avatar.avatar-more:after,
  .markdown-body .csv-data th, .capped-card-content,
  .new-discussion-timeline .previewable-comment-form .comment-form-head.tabnav,
  .select-menu-header, .select-menu-divider, .payment-history .refunded,
  .payment-history .failed, .branch-group-heading,
  .search-autocomplete-dropdown .autocomplete-keyword-only, .tint-box,
  .MarketplaceEdit-body .menu-item:hover,
  table.files tr[aria-selected="true"] td, table.files tr.navigation-focus td,
  .team-member-ellipsis:hover, table.capped-list th, .action-card:before,
  .action-card:after, .action-card-header:before,
  .gistsearch-aside .filter-list li span.bar,
  .gist-quicksearch-results .gist-quicksearch-result-header {
    background: #202020 !important;
  }
  .file {

    align-items: stretch;
    display: flex;
    justify-content: flex-start;
    position: relative;
    background-color: <%= siteThemeColour %>;

}
.gist .gist-meta {
    display: none;

}
.gist .gist-data {
    background-color: black;
    border-bottom: unset;
    border-radius: 5px;
}
.gist .gist-file {
    border: unset;
} 
.content table td, .content table th {

    border: 1px solid transparent;
    border-width: 0 0 1px;
    padding: 0.5em 0.75em;
    vertical-align: top;
    color: <%= tableTdThClr %> !important;

}
.pre-rounded {
    border-radius: 5px;
}
    </style>
<%- include("../../partials/footer.ejs") %>