<!DOCTYPE html>
<html lang="en">
<head>
    {% include "meta.jinja2" %}
    <link href="{{ settings['themes']['bootstrap'] }}" crossorigin="anonymous" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" crossorigin="anonymous"
          rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
            crossorigin="anonymous"></script>
    <script crossorigin="anonymous" src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <link rel="stylesheet" href="{{ settings['themes']['highlight_js'] }}">
    <script onload="hljs.highlightAll();" defer
            src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
    {% if settings['styles']['base'] != None %}
        <link rel="stylesheet" href="{{ settings['styles']['base']|static }}">
    {% endif %}
    {% block resources %} {% endblock %}
</head>
<body class="vh-100 d-flex flex-column" style="overflow-x: hidden;" id="top"
      {% if page.meta['render_toc'] %}data-bs-spy="scroll" data-bs-target="#TableOfContents"
      data-bs-offset="65"{% endif %}>
<header>
    <nav class="navbar navbar-expand-xl navbar-{{ settings['themes']['theme'] }} bg-{{ settings['themes']['theme'] }} sticky-top mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ 'home'|route }}"
               aria-label="Home">
                {% if settings['brand']['navbar_icon'] != None %}
                    <img width="{{ settings['brand']['navbar_icon_size'][0] }}"
                         height="{{ settings['brand']['navbar_icon_size'][1] }}"
                         src="{{ settings['brand']['navbar_icon']|static }}"
                         alt="{{ settings['brand']['app_name'] }} Logo"
                         class="d-inline-block align-text-top me-2"/>
                {% endif %}
                {{ settings['brand']['app_name'] }}</a>
            <button class="navbar-toggler align-text-middle" type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarMain" aria-controls="navbarMain"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarMain">
                {% macro render_nav_item(title, href) %}
                    {% set active=page.meta['title']|lower == title|lower %}
                    <li class="nav-item me-1">
                        <a id="{{ title|lower }}-nav" href="{{ href }}"
                           class="nav-link{% if active %} active{% endif %}"
                           {% if active %}aria-current="page"{% endif %}>
                            {{ title }}
                        </a>
                    </li>
                {% endmacro %}
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    {% for nav_item in nav_items %}
                        {% if nav_item.is_folder %}
                            {% set active=page.meta['title']|lower in nav_item.titles %}
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle {% if active %}active{% endif %}"
                                   {% if active %}aria-current="page"{% endif %} href="#" data-bs-toggle="dropdown"
                                   aria-expanded="false" id="{{ nav_item.meta['title'] }}-group" role="button">
                                    {{ nav_item.meta['title'] }}
                                </a>
                                <ul class="dropdown-menu" aria-labelledby="{{ nav_item.meta['title'] }}-group">
                                    {% for nav_page in nav_item.iter_items() %}
                                        <li>
                                            <a class="dropdown-item" href="{{ nav_page.content }}">
                                                {{ nav_page.meta['title'] }}
                                            </a>
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% else %}
                            {{ render_nav_item(nav_item.meta['title'], nav_item.content) }}
                        {% endif %}
                    {% endfor %}
                </ul>
                {% if settings['brand']['socials']|length != 0 %}
                    <hr class="d-xl-none"/>
                    <ul class="navbar-nav mb-2 ms-md-auto mb-lg-0">
                        {% for social in settings['brand']['socials'] %}
                            <li class="nav-item me-2">
                                <a class="nav-link p-2 fs-5" target="_blank" rel="noopener" href="{{ social['link'] }}">
                                    <i class="bi-{{ social['icon'] }}"></i>
                                    <small class="d-xl-none ms-2">{{ social['name'] }}</small>
                                </a>
                            </li>
                        {% endfor %}
                    </ul>
                {% endif %}
            </div>
        </div>
    </nav>
</header>
<div class="container-lg flex-grow-1">
    <main class="main">
        <div class="row g-6">
            {% if page.meta['render_toc'] %}
                <div class="col-lg-3">
                    <nav id="TableOfContents"
                         class="navbar navbar-light sticky-top flex-column align-items-stretch p-3"
                         style="max-height: 100vh !important;overflow-x: hidden;overflow-y: auto;z-index: 999 !important;">
                        {% macro render(item) %}
                            <a id="{{ item['id'] }}-toc" class="nav-link toc-link px-1 mb-1" href="#{{ item['id'] }}"
                               style="margin-left: {{ 0.7 * item['level'] }}rem;">{{ item['name'] }}</a>
                            {% if item['children'] %}
                                <nav class="nav nav-pills flex-column">
                                    {% for child in item['children'] %}
                                        {{ render(child) }}
                                    {% endfor %}
                                </nav>
                            {% endif %}
                        {% endmacro %}
                        <nav class="nav nav-pills flex-column">
                            <strong class="nav-text pb-2">On This Page</strong>
                            {% for item in page.meta['table_of_contents'] %}
                                {{ render(item) }}
                            {% endfor %}
                        </nav>
                    </nav>
                </div>
                <hr class="d-lg-none mt-3"/>
            {% endif %}
            <div id="page-contents" {% if page.meta['render_toc'] %}class="col-lg-9"{% else %}class="col"{% endif %}>
                {{ content }}
            </div>
        </div>
    </main>
</div>
<footer class="container-fluid w-100 mt-5 pt-4 pb-3 bg-{{ settings['themes']['theme'] }}">
    <div class="row gy-3 text-center">
        {% if settings['brand']['footer']['show_gen_time'] %}
            <div class="col-md">
                <p class="p-0 m-0">Last Generated: {{ gen_time }}</p>
            </div>
        {% endif %}
        {% if settings['brand']['footer']['show_back_to_top'] %}
            <div class="col-md">
                <a href="#top">Back To Top</a>
            </div>
        {% endif %}
        {% for item in settings['brand']['footer']['links'] %}
            <div class="col-md">
                <a {% if item['external'] %}target="_blank" rel="_blank"{% endif %}
                   href="{{ item['link'] }}">{{ item['text'] }}</a>
            </div>
        {% endfor %}
        {% if settings['brand']['footer']['show_made_with'] %}
            <div class="col-md">
                <a target="_blank" rel="noopener" href="https://github.com/Bwc9876/menagerie">Made With Menagerie</a>
            </div>
        {% endif %}
    </div>
</footer>
</body>
</html>
