{% 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>