{% load static %}
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <!-- Brand Logo -->
    <a href="/" class="brand-link">
        <img alt="KumiDC Logo" style="filter: invert(0.7)" src="{% static "frontend/dist/svgs/solid/lock.svg" %}"
            class="brand-image img-circle elevation-3" style="opacity: .8">
        <span class="brand-text font-weight-light"><b>Kumi</b>DC</span>
    </a>

    <!-- Sidebar -->
    <div class="sidebar">

        <!-- SidebarSearch Form -->
        <div class="form-inline">
            <div class="input-group" data-widget="sidebar-search">
                <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
                <div class="input-group-append">
                    <button class="btn btn-sidebar">
                        <i class="fas fa-search fa-fw"></i>
                    </button>
                </div>
            </div>
        </div>

        <!-- Sidebar Menu -->
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
                <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
               <li class="nav-header">PROFILE</li>
               <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-id-card"></i>
                    <p>My Profile Data</p>
                </a></li>
               <li class="nav-item"><a href="{% url "frontend:totp" %}" class="nav-link"><i class="nav-icon fas fa-mobile-screen"></i>
                       <p>Two-Factor</p>
                   </a></li>
                <li class="nav-header">CLIENT</li>
                <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-lock-open"></i>
                        <p>Authorized Apps</p>
                    </a></li>
                <li class="nav-header">DEVELOPER</li>
                <li class="nav-item"><a href="#" class="nav-link"><i class="nav-icon fas fa-code"></i>
                    <p>My Apps</p>
                </a></li>
            </ul>
        </nav>
        <!-- /.sidebar-menu -->
    </div>
    <!-- /.sidebar -->
</aside>