{% load jsonify %}
{% load i18n %}
{% load static %}
<!-- Main Sidebar Container -->
<aside class="main-sidebar sidebar-dark-primary elevation-4">
  <!-- Brand Logo -->
  <a href="{% url " site:main:home" %}" class="brand-link">
  <img assets src="{% static "/img/AdminLTELogo.png" %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
  style="opacity: .8">
  <span class="brand-text font-weight-light">{% translate 'Quran API' %}</span>
  </a>

  <!-- Sidebar -->
  <div class="sidebar" data-list='{{ user_sidebar|jsonify }}'>
    <!-- Sidebar user panel (optional) -->
    {% if request.user.is_authenticated %}
    <div class="user-panel mt-3 pb-3 d-flex">
      <div class="image">
        <img alt="User Image" class="img-circle elevation-2" src="{% static 'assets/img/user2-160x160.jpg' %}">
      </div>
      <div class="info">
        <a class="d-block" href="#">Alexander Pierce</a>
      </div>
    </div>
    {% endif %}
    <!-- SidebarSearch Form -->
    <div class="form-inline mt-3">
      <div class="input-group" data-widget="sidebar-search">
        <input aria-label="Search" class="form-control form-control-sidebar" placeholder="Search"
               type="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-accordion="false"
          data-widget="treeview"
          role="menu">
      </ul>
    </nav>
    <!-- /.sidebar-menu -->
  </div>
  <!-- /.sidebar -->
</aside>
