<!DOCTYPE html>
{% load i18n static %}
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TinyWiki</title>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
        {% block extra_css %}{% endblock %}
        <style>
            {% block style %}{% endblock %}
        </style>
        <script>
            document.documentElement.setAttribute('data-bs-theme', (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'));
        </script>
        {% block scripts %}{% endblock %}
    </head>
    <body class="min-vh-100 d-flex flex-column">
        
        <div class="container-fluid">
            <div class="row bg-primary pt-2">
                <div clas="col-md-12 text-white ">
                    {% if brand_logo %}
                    <img class="mb2 me-2" width="46" height="46" src="{{ brand_logo }}">
                    {% else %}
                    <svg class="bi mb-2 me-2 text-white" width="46" height="46" fill="currentColor">
                        <use xlink:href="{% static 'icons/bootstrap-icons.svg' %}#book" ></use>
                    </svg>
                    {% endif %}
                    <span class="display-6 font-weight-bold text-white me-2">{{ brand_name }}</span>
                    {% if subtitle %}
                    <span class="h2 text-truncate-sm">{{ subtitle }}</h2>
                    {% endif %}
                </div>        
            </div>
            <div class="navbar navbar-expand-lg">
                <div class="collapse navbar-collapse">
                    <ul class="navbar-nav mb-2 mb-lg-0 me-auto">
                    <li class="nav-item me-3">
                        <a class="nav-link" href="{% url 'tinywiki:home' %}">HOME</a>
                    </li>
                    {% if user_can_create_wiki_pages %}
                    <li class="nav-item me-3">
                        <a class="nav-link" href="{% url 'tinywiki:page-create' %}">{% translate "Create Page" %}</a>
                    </li>
                    {% endif %}
                    <li class="nav-item me-3">
                        <a class="nav-link" href="{% url 'tinywiki:toc' %}">{% translate "Wiki content" %}</a>
                    </li>
                </ul>
                <ul class="navbar-nav mb-2 mb-lg-0 list-group-horizontal">
                    {% if user.is_authenticated %}
                    <li class="nav-item">
                        <form method="POST" action="{% url 'account_logout' %}" class="d-inline">
                            {% csrf_token %}
                            <button type="submit" class="nav-link">{% translate "Log out" %}</button>
                        </form>
                    </li>
                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url "account_login" %}">{% translate "Log in" %}</a>
                    </li>
                    {% endif %}
                </ul>
            </div>
        </div>
            <div class="row h-100 mb-4">
                <div class="col-lg-3 pt-6 px-4 d-none d-lg-block" >
                        <ul class="list-group mt-2">
                            <li class="list-group-item bg-primary text-white">
                                <span class="list-group-badge">TinyWiki Pages</span>
                            </li>
                            <li class="list-group-item">
                                <a href="{% url "tinywiki:page" slug="tw-bbcode" %}">BBCode Guide</a>
                            </li>
                            <li class="list-group-item">
                                <a href="{% url "tinywiki:page" slug="tw-markdown" %}">Markdown Guide</a>
                            </li>
                            <li class="list-group-item">
                                <a href="{% url "tinywiki:page" slug="tw-license" %}">TinyWiki License</a>
                            </li>
                            <li class="list-group-item">
                                <a href="{% url "tinywiki:page" slug="tw-bootstrap-license" %}">Bootstrap License</a>
                            </li>
                        </ul>
                </div>
                <div class="col-lg-6">
                    <main>
                        {% block content %}
                        <h1>It Works!</h1>
                        {% endblock %}
                    </main>
                </div>
                <div class="col-lg-3">
                </div>
            </div>
        </div>
        <footer class="bg-secondary text-white mt-auto">
                <span class="ms-2">
                    Powered by TinyWiki
                </span>
                <span class="text-end">
                    <a class="text-white" href="{% url 'tinywiki:page' 'tw-license' %}"> &copy; 2025</a>
                </span>
        </footer>
        {% block extra_body %}{% endblock extra_body %}
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.min.js"></script>
        {% block extra_scripts %}{% endblock extra_scripts %}
    </body>
</html>