{% load static %}

<nav id="sidebarMenu" class="sidebar d-md-block bg-dark 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="user-avatar lg-avatar me-4">
            <img src="{% static 'volt/img/team/profile-picture-3.jpg' %}" class="card-img-top rounded-circle border-white"
              alt="Bonnie Green">
          </div>
          <div class="d-block">
            <h2 class="h6">
              {{ request.user.username }}
            </h2>
            <a href="{% url 'account_logout' %}" class="btn btn-secondary text-dark btn-xs"><span
                class="me-2"><span class="fas fa-sign-out-alt"></span></span>Sign Out</a>
          </div>
        </div>
        <div class="collapse-close d-md-none">
          <a href="#sidebarMenu" class="fas fa-times" data-bs-toggle="collapse" data-bs-target="#sidebarMenu"
            aria-controls="sidebarMenu" aria-expanded="true" aria-label="Toggle navigation"></a>
        </div>
      </div>
      <ul class="nav flex-column pt-3 pt-md-0">
        <li class="nav-item">
          <a href="/" class="nav-link d-flex align-items-center">
            <span class="sidebar-icon">
              <img src="{% static 'volt/img/brand/light.svg' %}" height="20" width="20" alt="Volt Logo">
            </span>
            <span class="mt-1 ms-1 sidebar-text">Volt Overview</span>
          </a>
        </li>
        <li class="nav-item {% if 'dashboard' in segment %} active {% endif %}">
          <a href="/dashboard.html" class="nav-link">
            <span class="sidebar-icon"><span class="fas fa-chart-pie"></span></span>
            <span class="sidebar-text">Dashboard</span>
          </a>
        </li>
        <li class="nav-item {% if 'transactions' in segment %} active {% endif %}">
          <a href="/transactions.html" class="nav-link">
            <span class="sidebar-icon"><span class="fas fa-hand-holding-usd"></span></span>
            <span class="sidebar-text">Transactions</span>
          </a>
        </li>
        <li class="nav-item {% if 'settings' in segment %} active {% endif %}">
          <a href="/settings.html" class="nav-link">
            <span class="sidebar-icon"><span class="fas fa-cog"></span></span>
            <span class="sidebar-text">Settings</span>
          </a>
        </li>
        <li class="nav-item {% if 'bootstrap-tables' in segment %} active {% endif %}">
          <span
            class="nav-link  collapsed  d-flex justify-content-between align-items-center"
            data-bs-toggle="collapse" data-bs-target="#submenu-app">
            <span>
              <span class="sidebar-icon"><span class="fas fa-table"></span></span>
              <span class="sidebar-text">Tables</span>
            </span>
            <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
          </span>
          <div class="multi-level collapse "
            role="list" id="submenu-app" aria-expanded="false">
            <ul class="flex-column nav">
              <li class="nav-item ">
                <a class="nav-link" href="/bootstrap-tables.html">
                  <span class="sidebar-text">Bootstrap Tables</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item">
          <span
            class="nav-link  collapsed  d-flex justify-content-between align-items-center"
            data-bs-toggle="collapse" data-bs-target="#submenu-pages">
            <span>
              <span class="sidebar-icon"><span class="far fa-file-alt"></span></span>
              <span class="sidebar-text">Page examples</span>
            </span>
            <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
          </span>
          <div class="multi-level collapse " role="list"
            id="submenu-pages" aria-expanded="false">
            <ul class="flex-column nav">
              <li class="nav-item">
                <a class="nav-link" href="/sign-in.html">
                  <span class="sidebar-text">Sign In</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/sign-up.html">
                  <span class="sidebar-text">Sign Up</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/forgot-password.html">
                  <span class="sidebar-text">Forgot password</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/reset-password.html">
                  <span class="sidebar-text">Reset password</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/lock.html">
                  <span class="sidebar-text">Lock</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/page-404.html">
                  <span class="sidebar-text">404 Not Found</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="/page-500.html">
                  <span class="sidebar-text">500 Not Found</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li class="nav-item {% if 'ui-' in segment %} active {% endif %}">
          <span
            class="nav-link  collapsed  d-flex justify-content-between align-items-center"
            data-bs-toggle="collapse" data-bs-target="#submenu-components">
            <span>
              <span class="sidebar-icon"><span class="fas fa-box-open"></span></span>
              <span class="sidebar-text">Components</span>
            </span>
            <span class="link-arrow"><span class="fas fa-chevron-right"></span></span>
          </span>
          <div class="multi-level collapse " role="list"
            id="submenu-components" aria-expanded="false">
            <ul class="flex-column nav">
              <li class="nav-item ">
                <a class="nav-link" href="/ui-buttons.html">
                  <span class="sidebar-text">Buttons</span>
                </a>
              </li>
              <li class="nav-item ">
                <a class="nav-link" href="/ui-notifications.html">
                  <span class="sidebar-text">Notifications</span>
                </a>
              </li>
              <li class="nav-item ">
                <a class="nav-link" href="/ui-forms.html">
                  <span class="sidebar-text">Forms</span>
                </a>
              </li>
              <li class="nav-item ">
                <a class="nav-link" href="/ui-modals.html">
                  <span class="sidebar-text">Modals</span>
                </a>
              </li>
              <li class="nav-item ">
                <a class="nav-link" href="/ui-typography.html">
                  <span class="sidebar-text">Typography</span>
                </a>
              </li>
            </ul>
          </div>
        </li>
        <li role="separator" class="dropdown-divider mt-4 mb-3 border-black"></li>
        <li class="nav-item">
          <a href="https://appseed.us/admin-dashboards/django-dashboard-volt" 
             target="_blank"
            class="nav-link d-flex align-items-center">
            <span class="sidebar-icon"><span class="fas fa-info-circle"></span></span>
            <span class="sidebar-text">Product Page</span>
          </a>
        </li>
        <li class="nav-item">
          <a href="https://appseed.us/" 
             target="_blank"
            class="nav-link d-flex align-items-center">
            <span class="sidebar-icon"><span class="fas fa-envelope"></span></span>
            <span class="sidebar-text">Support</span>
          </a>
        </li>
        <li class="nav-item">
          <a target="_blank" 
             href="https://appseed.us/admin-dashboards/django-dashboard-volt-pro"
            class="btn btn-secondary d-flex align-items-center justify-content-center btn-upgrade-pro">
            <span class="sidebar-icon"><span class="fas fa-rocket me-2"></span></span> 
              <span>Upgrade to Pro</span>
          </a>
        </li>
      </ul>
    </div>
  </nav>
  