{% load i18n static admin_volt %}

<nav class="navbar navbar-dark navbar-theme-primary px-4 col-12 d-lg-none">
    <a class="navbar-brand me-lg-5" href="/">
        <img class="navbar-brand-dark" src="{% static 'admin_volt/assets/img/brand/light.svg' %}" alt="Volt logo"/>
        <img class="navbar-brand-light" src="{% static 'admin_volt/assets/img/brand/dark.svg' %}" alt="Volt logo"/>
    </a>
    <div class="d-flex align-items-center">
        <button class="navbar-toggler d-lg-none collapsed" type="button" data-bs-toggle="collapse"
                data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>

<nav id="sidebarMenu" class="sidebar d-lg-block bg-gray-800 text-white collapse" data-simplebar>
    <div class="sidebar-inner px-4 pt-3">
        <div class="user-card d-flex d-md-none align-items-center justify-content-between justify-content-md-center pb-4">
            <div class="d-flex align-items-center">
                <div class="d-block">
                    <h2 class="h5 mb-3">Hi, {{ request.user.first_name|default:request.user.username }}</h2>
                    <a href="#" class="btn btn-secondary btn-sm d-inline-flex align-items-center">
                        <span class="fa fa-sign-out"></span> Sign Out
                    </a>
                </div>
            </div>
            <div class="collapse-close d-md-none">
                <a href="#sidebarMenu" data-bs-toggle="collapse"
                   data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="true"
                   aria-label="Toggle navigation">
                    <svg class="icon icon-xs" fill="currentColor" viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd"
                              d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
                              clip-rule="evenodd"></path>
                    </svg>
                </a>
            </div>
        </div>
        <ul class="nav flex-column pt-3 pt-md-0">
            <li class="nav-item">
                <a href="{% url 'admin:index' %}" class="nav-link d-flex align-items-center">
                    <span class="sidebar-icon">
                       <img src="{% static 'admin_volt/assets/img/brand/light.svg' %}" height="20" width="20" alt="Volt Logo">
                    </span>
                    <span class="mt-1 ms-1 sidebar-text">{% trans 'Administrator' %}</span>
                </a>
            </li>

            <li class="nav-item {% if 'dashboard' in segment %} active {% endif %}">
                <a href="{% url 'admin:index' %}" class="nav-link">
                    <span class="sidebar-icon fa fa-home"></span>
                    <span class="sidebar-text">{% trans 'Dashboard' %}</span>
                </a>
            </li>

            {% admin_get_menu as app_list %}
            {% if app_list %}
                {% for app in app_list %}
                    {% if app.has_perms and not app.pinned %}
                        <li class="nav-item">
                          <span class="nav-link{% if app_label != app.label and app.url not in request.path|urlencode  %} collapsed{% endif %} d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#submenu-{{ app.app_label }}">
                                <span>
                                    <span class="sidebar-icon {{ app.icon }}"></span>
                                    <a href="{{ app.url }}">
                                      <span class="sidebar-text">{{ app.label|slice:18 }}{% if app.label|length > 18 %}..{% endif %}</span>
                                    </a>
                                </span>
                                {% if app.models %}
                                    <span class="link-arrow">
                                        <svg class="icon icon-sm" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                                            <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                        </svg>
                                    </span>
                                {% endif %}
                            </span>

                            {% if app.models %}
                              <div class="multi-level collapse {% if 'tables-bootstrap-' in segment or app_label == app.label or app.url in request.path|urlencode %} show {% endif %}" role="list" id="submenu-{{ app.app_label }}"  
                                                                                                                                      aria-expanded="{% if app_label == app.label or app.url in request.path|urlencode %}true{% else %}false{% endif %}">
                                    <ul class="flex-column nav">
                                        {% for model in app.models %}
                                            {% if model.url %}
                                              <li class="nav-item{% if 'bootstrap-tables' in segment or model.url in request.path|urlencode %} active {% endif %}">
                                                    <a class="nav-link" href="{{ model.url }}">
                                                      <span class="sidebar-text">{{ model.label }}</span>
                                                    </a>
                                                </li>
                                            {% else %}
                                                <li>{{ model.label }}</li>
                                            {% endif %}
                                        {% endfor %}
                                    </ul>
                                </div>
                            {% endif %}
                        </li>
                    {% endif %}
                {% endfor %}
            {% endif %}
        </ul>
    </div>
</nav>
