<aside class="navbar navbar-vertical navbar-expand-lg" data-bs-theme="dark">
    <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#sidebar-menu"
                aria-controls="sidebar-menu" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <h1 class="navbar-brand navbar-brand-autodark">
            <a href="/">
                {% if logo == False %}
                    {{ title }}
                {% else %}
                    <img src="{% if logo %}{{ url_for('my-public', path=logo) }}{% else %}/statics/placeholders/logo/logo-white.svg{% endif %}"
                         width="110" height="32" alt="Tabler" class="navbar-brand-image"
                    >
                {% endif %}
            </a>
        </h1>
        <div class="collapse navbar-collapse" id="sidebar-menu">
            <ul class="navbar-nav">
                {% for key, item in models.items() if not item._hidden %}
                    <li class="nav-item">
                        <a class="nav-link dropdown-item" href="/list/{{ key }}">
                          <span class="nav-link-icon d-md-none d-lg-inline-block color">
                              <i class="ti ti-{{ item._icon }}"></i>
                          </span>
                          <span class="nav-link-title">{{ key }}</span>
                        </a>
                    </li>
                {% endfor %}
                {# todo: dropdowns #}
                {#<li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#navbar-base" data-bs-toggle="dropdown" data-bs-auto-close="false" role="button" aria-expanded="false">
                      <span class="nav-link-icon d-md-none d-lg-inline-block"><!-- Download SVG icon from https://tabler-icons.io/i/package -->
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                             stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                             stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                            <path d="M12 3l8 4.5l0 9l-8 4.5l-8 -4.5l0 -9l8 -4.5"/>
                            <path d="M12 12l8 -4.5"/>
                            <path d="M12 12l0 9"/>
                            <path d="M12 12l-8 -4.5"/>
                            <path d="M16 5.25l-8 4.5"/>
                        </svg>
                      </span>
                      <span class="nav-link-title">Interface</span>
                    </a>
                    <div class="dropdown-menu">
                        <div class="dropdown-menu-columns">
                            <div class="dropdown-menu-column">
                                <div class="dropend">
                                    <a class="nav-link dropdown-item" href="./">
                                        <!-- Download SVG icon from https://tabler-icons.io/i/file-minus -->
                                        <span class="nav-link-icon d-md-none d-lg-inline-block">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-inline me-1" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z" /><path d="M9 14l6 0" /></svg>
                                        </span>
                                        <span class="nav-link-title">Errors</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>#}
            </ul>
        </div>
    </div>
</aside>