{% load static %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link href="{% static 'bootstrap.min.css' %}" rel="stylesheet"> <!-- Bootstrap Icons CSS --> <link href="{% static 'bootstrap-icons.min.css' %}" rel="stylesheet"> <!-- Tabulator CSS --> <link href="{% static 'tabulator_bootstrap5.min.css' %}" rel="stylesheet"> <title> {% block title %}Claremont MakerSpace{% endblock %} </title> </head> <body> <script src="{% static 'bootstrap-color-toggle.js' %}"></script> <nav class="navbar navbar-expand-sm bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="{% url 'dashboard:dashboard' %}">Claremont MakerSpace</a> <nav aria-label="breadcrumb" class="d-none d-sm-block"> <ol class="breadcrumb" style="--bs-breadcrumb-margin-bottom: 0;"> {% block breadcrumbs %}{% endblock %} </ol> </nav> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#user-nav" aria-controls="user-nav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div id="user-nav" class="collapse navbar-collapse justify-content-end"> <div class="navbar-nav"> {% block nav_extra %}{% endblock %} <div class="nav-item dropdown"> <button class="btn btn-link nav-link dropdown-toggle d-flex align-items-center" id="bd-theme" type="button" aria-expanded="false" data-bs-toggle="dropdown" data-bs-display="static" aria-label="Toggle theme (auto)"> <i class="bi theme-icon-active bi-circle-half"></i> <span class="d-none ms-2" id="bd-theme-text">Toggle theme</span> </button> <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="bd-theme-text"> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="light" aria-pressed="false"> <i class="bi me-2 opacity-50 theme-icon bi-sun-fill"></i> Light <i class="bi ms-auto d-none bi-check2"></i> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center" data-bs-theme-value="dark" aria-pressed="false"> <i class="bi me-2 opacity-50 theme-icon bi-moon-stars-fill"></i> Dark <i class="bi ms-auto d-none bi-check2"></i> </button> </li> <li> <button type="button" class="dropdown-item d-flex align-items-center active" data-bs-theme-value="auto" aria-pressed="true"> <i class="bi me-2 opacity-50 theme-icon bi-circle-half"></i> Auto <i class="bi ms-auto d-none bi-check2"></i> </button> </li> </ul> </div> {% if user.is_staff %} <a class="nav-item nav-link" href="{% block admin_link %}{% url 'admin:index' %}{% endblock %}">Admin</a> {% endif %} {% if user.is_authenticated %} <form method="post" action="{% url 'logout' %}"> {% csrf_token %} <button class="btn" type="submit">Logout: {{ user }}</button> </form> {% else %} <a class="nav-item nav-link" href="{% url 'login' %}?next={{ request.get_full_path }}">Login</a> {% endif %} </div> </div> </div> </nav> {% if messages %} <div class="messages m-3"> {% for message in messages %} {# TODO: should use tags correctly for bootstrap alerts #} <div role="alert" class="alert alert-info alert-dismissible fade show {% if message.tags %}{{ message.tags }}{% endif %}"> {{ message }} <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> </div> {% endfor %} </div> {% endif %} <div id="content" class="m-3"> {% block content %}{% endblock %} </div> {% block footer %}{% endblock %} </body> <!-- Bootstrap JS --> <script src="{% static 'bootstrap.bundle.min.js' %}"></script> <!-- Tabulator JS --> <script src="{% static 'tabulator.min.js' %}"></script> {% block script %} {% endblock %} </html>