{% load adminlte_helpers %}
{%load static %}
<!-- Left side column. contains the sidebar -->
<aside class="main-sidebar sidebar-dark-primary  elevation-4">
     <!-- Brand Logo -->
    {% block logo %}
        <a href="/" class="brand-link">
            <img src="{%static 'admin-lte/dist/img/AdminLTELogo.png' %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3" style="opacity: .8">
            {% block logo_text %}<span class="brand-text font-weight-light">AdminLTE 3 </span>{% endblock %}
        </a>
    {% endblock %}
    <!-- sidebar: style can be found in sidebar.less -->
    <div class="sidebar">
        <!-- Sidebar user panel -->
        {% block user_panel %}
        <!-- Sidebar user panel (optional) -->
      <div class="user-panel mt-3 pb-3 mb-3 d-flex">
        <div class="image">
          <img src="{% avatar_url size=90 %}" class="img-circle elevation-2" alt="User Image">
        </div>
        <div class="info">
          <a href="#" class="d-block">{% firstof request.user.get_full_name request.user.username %}</a>
        </div>
      </div>
        {% endblock %}

        {% block form %}{% endblock %}

        <!-- sidebar menu: : style can be found in sidebar.less -->
        {% block nav_links_ul %}
        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
            {% block nav_links_outer %}
            <li class="nav-header">{% block nav_heading %}MAIN NAVIGATION{% endblock %}</li>

            {% block nav_links %}
                <li class="nav-item">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-tachometer-alt"></i> 
                        <p>Example link</p>
                    </a>
                </li>
                <li class="nav-item">
                        <a href="#" class="nav-link active">
                            <i class="nav-icon fas fa-tachometer-alt"></i> 
                            <p>Example link active</p>
                        </a>
                    </li>
                <li class="nav-item has-tree-view ">
                    <a href="#" class="nav-link">
                        <i class="nav-icon fas fa-object-group"></i> <p>Sub menu</p>
                        <p><i class="right fas fa-angle-left"></i>
                        </p>
                    </a>
                    <ul class="nav nav-treeview menu-open">
                            <li class="nav-item">
                                    <a href="#" class="nav-link">
                                        <i class="nav-icon fas fa-circle"></i> link
                                    </a>
                                </li>
                        <li class="nav-item">
                            <a href="#" class="nav-link active">
                                <i class="nav-icon fas fa-user"></i> Another link
                            </a>
                        </li>
                    </ul>
                </li>
            {% endblock nav_links %}
            {% endblock nav_links_outer %}
            </ul>
            </nav>
        {% endblock nav_links_ul %}
    </div>
    <!-- /.sidebar -->
</aside>
