{% extends 'common/html.html' %}

{% block body %}
  <div class="page">
    <!-- sidebar -->
    <aside class="navbar navbar-vertical navbar-expand-lg navbar-light">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-menu">
          <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="navbar-brand navbar-brand-autodark">
          {% block brand %}{% endblock %}
        </h1>
        <div class="navbar-nav flex-row d-lg-none">
          <div class="d-none d-lg-flex">
            {% include 'common/widgets/_theme_toggler.html' %}
            {% include 'common/widgets/_notification_dropdown.html' %}
          </div>
          {% include 'common/layout/_user_menu.html' %}
        </div>
        <div class="collapse navbar-collapse" id="navbar-menu">
          <ul class="navbar-nav pt-lg-3">
            {% for item in menus.views %}
              <li class="nav-item{% if item.selected %} active{% endif %}">

                {% if item.has_children %}
                  {# collapse toggle #}
                  <a href="#"
                     class="nav-link btn-toggle{% if item.collapsed %} collapsed{% endif %}"
                     data-bs-toggle="collapse"
                     data-bs-target="#{{ item.slug }}-collapse"
                     aria-expanded="true">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <i class="bi bi-{{ item.icon }}"></i>
                    </span>
                    <span class="nav-link-title">
                      {{ item.title }}
                    </span>
                  </a>
                  {# collapse: children 1. level #}
                  <div class="collapse{% if not item.collapsed %} show{% endif %}" id="{{ item.slug }}-collapse">
                    <ul class="nav flex-column mb-auto">
                      {% for child in item.children %}
                        <li class="nav-item ps-3{% if child.selected %} active{% endif %}">
                          <a href="{{ child.url }}" class="nav-link">
                            <span class="nav-link-icon d-md-none d-lg-inline-block">
                              <i class="bi bi-{{ child.icon }}"></i>
                            </span>
                            <span class="nav-link-title">
                              {{ child.title }}
                            </span>
                            {% if child.badge %}
                              <span class="position-absolute top-3 start-100 translate-middle badge rounded-pill bg-danger">
                                {{ child.badge }}
                                {# <span class="visually-hidden">unread messages</span> #}
                              </span>
                            {% endif %}

                          </a>
                        </li>
                      {% endfor %}
                    </ul>
                  </div>
                {% else %}
                  <a href="{{ item.url }}" class="nav-link">
                    <span class="nav-link-icon d-md-none d-lg-inline-block">
                      <i class="bi bi-{{ item.icon }}"></i>
                    </span>
                    <span class="nav-link-title">
                      {{ item.title }}
                    </span>
                    {% if item.badge %}
                      <span class="position-absolute top-3 start-100 translate-middle badge rounded-pill bg-danger">
                        {{ item.badge }}
                        {# <span class="visually-hidden">unread messages</span> #}
                      </span>
                    {% endif %}
                  </a>
                {% endif %}
              </li>
            {% endfor %}

          </ul>
        </div>
      </div>
    </aside>
    <!-- end sidebar -->
    {% include 'common/layout/navbar.html' %}
    {% block canvas %}{% endblock %}
  </div>
{% endblock %}

{% block modal %}
  <div id="modal" class="modal">
    <div id="dialog" class="modal-dialog modal-dialog-centered" role="document" hx-target="this">
      <!-- insert modal content here -->
    </div>
  </div>
{% endblock %}

{% block toast %}
  <div class="position-fixed top-0 end-0 p-3">
    <div id="toast" class="toast align-items-center text-white bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="d-flex">
        <div id="toast-body" class="toast-body"></div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
    </div>
  </div>
{% endblock %}
