{% set navigation_bar = [
    ('/', 'index', 'Home'),
    ('/handbook', 'handbook', 'Handbook'),
    ('/npc/party', 'npcparty', 'NPC Party'),
    ('/npc/single', 'npcsingle', 'Single NPC'),
    ('/npc/spells', 'spells', 'Spells'),
    ('/api/schema', 'api', 'API'),
    ('/worldmap', 'worldmap', 'World Map'),
] %}
{% set active_page = active_page|default('index') %}

<!doctype html>
<html>
    <head>
        <title>{% block title %}{% endblock %} - Atr0phy ACKS</title>

        <meta charset="utf-8">
        <meta name="viewport" contents="width=device-width, initial-scale=1">

        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

        <!-- UIkit CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/css/uikit.min.css" />

        <!-- UIkit JS -->
        <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.4/dist/js/uikit-icons.min.js"></script>

        {% block head %} {% endblock %}
    </head>
    <body>
        <nav class="uk-navbar-container" uk-navbar>
            <div class="uk-navbar-left">
                <a href="" class="uk-hidden@m uk-button-default uk-margin-small-left uk-margin-small-right" uk-toggle="target: #offcanvas-nav" uk-icon="menu"></a>
                <a href="" class="uk-navbar-item uk-logo">Atr0phy ACKS</a>
            </div>
            <div class="uk-navbar-center uk-visible@m">
                <ul class="uk-navbar-nav">
                    {% for href, id, label in navigation_bar %}
                        <li {% if id == active_page %} class="uk-active" {% endif %}>
                            <a href="{{ href|e }}">{{ label|e }}</a>
                        </li>
                    {% endfor %}
                </ul>
            </div>
        </nav>
    <div id="offcanvas-nav" uk-offcanvas="overlay: true">
        <div class="uk-offcanvas-bar uk-flex uk-flex-column">
            <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical">
                {% for href, id, label in navigation_bar %}
                    <li {% if id == active_page %} class="uk-active" {% endif %}>
                        <a href="{{ href|e }}">{{ label|e }}</a>
                    </li>
                {% endfor %}
            </ul>
        </div>
    </div>
        <div class="uk-container">
        {% block content %}{% endblock %}
        </div>
    </body>
</html>
