{% from "components/primitives/icon.html" import tabler_icon %}
<aside
  class="navbar navbar-vertical navbar-expand-lg beeui-sidebar {{ layout.sidebar_variant_class }} {{ layout.sidebar_collapsed_class }}"
  {% if layout.sidebar_variant == "dark" %}data-bs-theme="dark"{% endif %}
  aria-label="Sidebar"
  id="beeui-sidebar"
>
  <div class="container-fluid">
    <button
      class="navbar-toggler"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#beeui-sidebar-menu"
      aria-controls="beeui-sidebar-menu"
      aria-expanded="false"
      aria-label="Toggle navigation"
    >
      <span class="navbar-toggler-icon" aria-hidden="true"></span>
    </button>
    <h1 class="navbar-brand navbar-brand-autodark">
      <a href="{{ route_prefix }}/">{{ logo_text }}</a>
    </h1>
    <div class="collapse navbar-collapse" id="beeui-sidebar-menu">
      {% macro render_icon(icon) %}
      <span
        class="nav-link-icon d-md-none d-lg-inline-block"
        aria-hidden="true"
      >
        {{ tabler_icon(icon, 'icon icon-1') }}
      </span>
      {% endmacro %}

      {% macro render_items(items) %}
      <ul class="navbar-nav pt-lg-3" role="list">
        {% for item in items %}
        <li
          class="nav-item{% if item.active %} active{% endif %}{% if item.is_group %} beeui-nav-group{% endif %}"
        >
          {% if item.is_group %}
          <div
            class="nav-link sidebar__link beeui-nav-group-title{% if item.descendant_active %} is-active{% endif %}"
            aria-label="{{ item.title }}"
          >
            <span class="nav-link-title">{{ item.title }}</span>
          </div>
          {% elif item.disabled %}
          <span
            class="nav-link sidebar__link beeui-nav-disabled"
            aria-disabled="true"
            tabindex="-1"
          >
            {{ render_icon(item.icon) }}
            <span class="nav-link-title">{{ item.title }}</span>
          </span>
          {% else %}
          <a
            class="nav-link sidebar__link{% if item.active %} is-active{% endif %}"
            href="{{ item.href }}"
          >
            {{ render_icon(item.icon) }}
            <span class="nav-link-title">{{ item.title }}</span>
          </a>
          {% endif %}

          {% if item.children %}
          <div
            class="beeui-nav-children{% if item.descendant_active %} is-open{% endif %}"
          >
            {{ render_items(item.children) }}
          </div>
          {% endif %}
        </li>
        {% endfor %}
      </ul>
      {% endmacro %}

      {{ render_items(navigation) }}
    </div>

    <div class="beeui-theme-toggle" id="beeui-theme-buttons">
      <span class="beeui-theme-toggle-label">{{ translate("theme.label", locale) }}</span>
      <div class="beeui-theme-toggle-group">
        <button
          type="button"
          class="beeui-theme-toggle-btn"
          data-theme-mode="system"
          onclick="beeuiSetTheme('system')"
          aria-label="{{ translate("theme.system_aria", locale) }}"
          title="{{ translate("theme.system", locale) }}"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <rect x="2" y="3" width="20" height="14" rx="2" ry="2" />
            <path d="M8 21h8" />
            <path d="M12 17v4" />
          </svg>
        </button>
        <button
          type="button"
          class="beeui-theme-toggle-btn"
          data-theme-mode="light"
          onclick="beeuiSetTheme('light')"
          aria-label="{{ translate("theme.light_aria", locale) }}"
          title="{{ translate("theme.light", locale) }}"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="12" cy="12" r="5" />
            <path d="M12 1v2" />
            <path d="M12 21v2" />
            <path d="M4.22 4.22l1.42 1.42" />
            <path d="M18.36 18.36l1.42 1.42" />
            <path d="M1 12h2" />
            <path d="M21 12h2" />
            <path d="M4.22 19.78l1.42-1.42" />
            <path d="M18.36 5.64l1.42-1.42" />
          </svg>
        </button>
        <button
          type="button"
          class="beeui-theme-toggle-btn"
          data-theme-mode="dark"
          onclick="beeuiSetTheme('dark')"
          aria-label="{{ translate("theme.dark_aria", locale) }}"
          title="{{ translate("theme.dark", locale) }}"
        >
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</aside>