{% load i18n static admin_volt check_include %}

<nav id="sidebarMenu" class="sidebar d-lg-block bg-gray-800 text-white collapse" data-simplebar>
  <div class="sidebar-inner px-2 pt-2 pb-4">
    <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="avatar-lg me-4">
          {% if user.avatar %}
            <img class="card-img-top rounded-circle border-white" src="{% url 'serve_files:serve_decrypted_file' 'home' 'user' 'avatar' user.uuid %}" alt="User-Profile-Image" class="user-avtar wid-35" />
          {% else %}
            <img class="card-img-top rounded-circle border-white" alt="Image placeholder" src="{% static 'assets/img/team/generic_user.png' %}">
          {% endif %}
        </div>
        <div class="d-block">
          <h2 class="h5 mb-3">Olá, {{ request.user.username }}</h2>
          <a href="{% url 'logout' %}" class="btn btn-secondary btn-sm d-inline-flex align-items-center">
            <svg class="icon icon-xxs me-1" fill="none" stroke="currentColor" viewBox="0 0 24 24"
              xmlns="http://www.w3.org/2000/svg">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path>
            </svg>
            {% trans "Sair" %}
          </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 'index' %}" class="nav-link d-flex align-items-center">
          <span class="sidebar-icon">
            <img src="{% static 'assets/img/l2_logo.png' %}" height="60" alt="Lineage2 Logo" />
          </span>

        </a>
      </li>

      <li class="nav-item {% if 'dashboard' in segment %}active{% endif %}">
        <a href="{% url 'dashboard' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path d="M10 6a4 4 0 11-4 4 4 4 0 014-4z"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Início" %}</span>
        </a>
      </li>  
      
      {% if user.is_authenticated %}

      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></li>

      <li class="nav-item {% if 'faq' in segment %}active{% endif %}">
        <a href="{% url 'faq:faq_list' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path d="M10 6a4 4 0 11-4 4 4 4 0 014-4z"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Ajuda (FAQ)" %}</span>
        </a>
      </li> 

      <li class="nav-item {% if 'news' in segment %}active{% endif %}">
        <a href="{% url 'news:index' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path d="M10 6a4 4 0 11-4 4 4 4 0 014-4z"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Notícias" %}</span>
        </a>
      </li> 

      <li class="nav-item {% if 'message' in segment %}active{% endif %}">
        <a href="{% url 'message:index' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path d="M10 6a4 4 0 11-4 4 4 4 0 014-4z"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Mensagens" %}</span>
        </a>
      </li> 

      <li class="nav-item {% if 'solicitation' in segment %}active{% endif %}">
        <a href="{% url 'solicitation:solicitation_list' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path d="M10 6a4 4 0 11-4 4 4 4 0 014-4z"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Solicitações" %}</span>
        </a>
      </li> 

      {% endif %}

      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></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-components">
          <span>
            <span class="sidebar-icon">
              <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2a1 1 0 00-1 1v2a4 4 0 004 4h2a4 4 0 004-4V3a1 1 0 00-1-1H6zM4 5a2 2 0 01-2-2h2v2zm12-2h2a2 2 0 01-2 2V3z"></path>
                <path fill-rule="evenodd" d="M4 13a6 6 0 0012 0H4zm6 3a3 3 0 003-3H7a3 3 0 003 3z" clip-rule="evenodd"></path>
              </svg>
            </span>            
            {% trans "Tops" %}
            <span class="sidebar-text"></span>
          </span>
          <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>
        </span>
        <div class="multi-level collapse {% if 'tops' in parent %}show{% endif %}" role="list" id="submenu-components" aria-expanded="false">
          <ul class="flex-column nav">

            <li class="nav-item {% if 'top-level' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_level' %}">
                <span class="sidebar-text">{% trans "Top Level" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-pk' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_pk' %}">
                <span class="sidebar-text">{% trans "Top PK" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-pk' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_pvp' %}">
                <span class="sidebar-text">{% trans "Top PVP" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-adena' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_adena' %}">
                <span class="sidebar-text">{% trans "Top Adena" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-clans' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_clans' %}">
                <span class="sidebar-text">{% trans "Top Clans" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-clans' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:top_online' %}">
                <span class="sidebar-text">{% trans "Top Online" %}</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-heroes">
          <span>
            <span class="sidebar-icon">
              <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M6 2a1 1 0 00-1 1v2a4 4 0 004 4h2a4 4 0 004-4V3a1 1 0 00-1-1H6zM4 5a2 2 0 01-2-2h2v2zm12-2h2a2 2 0 01-2 2V3z"></path>
                <path fill-rule="evenodd" d="M4 13a6 6 0 0012 0H4zm6 3a3 3 0 003-3H7a3 3 0 003 3z" clip-rule="evenodd"></path>
              </svg>
            </span>
            {% trans "Heroes" %}
            <span class="sidebar-text"></span>
          </span>
          <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>
        </span>
        <div class="multi-level collapse {% if 'heroes' in parent %}show{% endif %}" role="list" id="submenu-heroes" aria-expanded="false">
          <ul class="flex-column nav">
      
            <li class="nav-item {% if 'top-olympiad' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:olympiad_ranking' %}">
                <span class="sidebar-text">{% trans "Top Olympiad" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-heroes-all' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:olympiad_all_heroes' %}">
                <span class="sidebar-text">{% trans "All Heroes" %}</span>
              </a>
            </li>
            
            <li class="nav-item {% if 'top-heroes-current' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'server:olympiad_current_heroes' %}">
                <span class="sidebar-text">{% trans "Current Heroes" %}</span>
              </a>
            </li>
      
          </ul>
        </div>
      </li>      

      <li class="nav-item {% if 'siege' in segment %}active{% endif %}">
        <a href="{% url 'server:siege_ranking' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2C5.58 2 2 5.58 2 10s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 2c.55 0 1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H6c-.55 0-1-.45-1-1s.45-1 1-1h3V5c0-.55.45-1 1-1z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Castle Siege" %}</span>
        </a>
      </li>
      
      <li class="nav-item {% if 'boss-jewel' in segment %}active{% endif %}">
        <a href="{% url 'server:boss_jewel_locations' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2C5.58 2 2 5.58 2 10s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 2c.55 0 1 .45 1 1v3h3c.55 0 1 .45 1 1s-.45 1-1 1h-3v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H6c-.55 0-1-.45-1-1s.45-1 1-1h3V5c0-.55.45-1 1-1z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Boss Jewel Locations" %}</span>
        </a>
      </li>

      <li class="nav-item {% if 'grandboss-status' in segment %}active{% endif %}">
        <a href="{% url 'server:grandboss_status' %}" class="nav-link">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 3c.55 0 1 .45 1 1v5h4c.55 0 1 .45 1 1s-.45 1-1 1h-5V6c0-.55.45-1 1-1z" clip-rule="evenodd"/>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Grand Boss Status" %}</span>
        </a>
      </li>      

      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></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 collapsed d-flex justify-content-between align-items-center" data-bs-toggle="collapse" data-bs-target="#submenu-dashboard{{app.app_label}}">
                <span>

                  <!-- ICONE DO APLICATIVO -->
                  {% with "icons/"|add:app.label|add:".html"|lower as dinamics_template %}
                    {% include_if_exists dinamics_template as template_to_include %}
                    {% if template_to_include %}
                      {% include template_to_include %}
                    {% else %}
                      {% include "icons/default.html" %}
                    {% endif %}
                  {% endwith %}

                  <!-- TEXTO DO APLICATIVO -->
                  {% if app.label == 'Autenticação e Autorização' %} 
                    <span class="sidebar-text">{% trans "Permissões" %}</span>
                  {% else %} 
                    <span class="sidebar-text">{{ app.label|slice:15 }}{% if app.label|length > 15 %}..{% endif %}</span>
                  {% endif %}

                </span>
                <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>
              </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-dashboard{{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-contracted"> A </span>
                            <span class="sidebar-text">{{ model.label }}</span>
                          </a>
                        </li>
                      {% else %}
                        <li class="nav-item">{{ model.label }}</li>
                      {% endif %}
                    {% endfor %}
                  </ul>
                </div> 
              {% endif %}
            </li>
          {% endif %}
        {% endfor %}
      {% endif %}

      {% if request.user.is_superuser %}
      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></li>

      <li class="nav-item">
        <a href="{% url 'accountancy:dashboard' %}" class="nav-link d-flex align-items-center">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12H9v4a1 1 0 002 0V6zm0 6H9v2a1 1 0 002 0v-2z"
                clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Dashboard Contábil" %}</span>
        </a>
      </li>      

      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></li>

      <li class="nav-item">
        <a href="{% url 'auditor:auditor' %}" class="nav-link d-flex align-items-center">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z"
                clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Auditoria" %}</span>
        </a>
      </li>
      
      <!-- Logs Info -->
      <li class="nav-item">
        <a href="{% url 'log_info_dashboard' %}" class="nav-link d-flex align-items-center">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path fill-rule="evenodd" d="M9 6h2v8H9z" clip-rule="evenodd"></path>
              <path fill-rule="evenodd" d="M9 10h2v2H9z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Logs Info" %}</span>
        </a>
      </li>

      <!-- Logs Errors -->
      <li class="nav-item">
        <a href="{% url 'log_error_dashboard' %}" class="nav-link d-flex align-items-center">
          <span class="sidebar-icon">
            <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
              <path fill-rule="evenodd" d="M10 2a8 8 0 11-8 8 8 8 0 018-8zm0 2a6 6 0 100 12 6 6 0 000-12z" clip-rule="evenodd"></path>
              <path fill-rule="evenodd" d="M9 6h2v8H9z" clip-rule="evenodd"></path>
              <path fill-rule="evenodd" d="M9 10h2v2H9z" clip-rule="evenodd"></path>
            </svg>
          </span>
          <span class="sidebar-text">{% trans "Logs Errors" %}</span>
        </a>
      </li>

      <li role="separator" class="dropdown-divider mt-4 mb-3 border-gray-700"></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-components">
          <span>
            <span class="sidebar-icon">
              <svg class="icon icon-xs me-2" fill="currentColor" viewBox="0 0 20 20"
                xmlns="http://www.w3.org/2000/svg">
                <path d="M4 3a2 2 0 100 4h12a2 2 0 100-4H4z"></path>
                <path fill-rule="evenodd"
                  d="M3 8h14v7a2 2 0 01-2 2H5a2 2 0 01-2-2V8zm5 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z"
                  clip-rule="evenodd"></path>
              </svg>
            </span>
            {% trans "Componentes" %}
            <span class="sidebar-text"></span>
          </span>
          <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>
        </span>
        <div class="multi-level collapse {% if 'components' in parent %}show{% endif %}" role="list" id="submenu-components" aria-expanded="false">
          <ul class="flex-column nav">
            <li class="nav-item {% if 'buttons' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'buttons' %}">
                <span class="sidebar-text">{% trans "Buttons" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'notifications' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'notifications' %}">
                <span class="sidebar-text">{% trans "Notifications" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'forms' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'forms' %}">
                <span class="sidebar-text">{% trans "Forms" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'modals' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'modals' %}">
                <span class="sidebar-text">{% trans "Modals" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'typography' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'typography' %}">
                <span class="sidebar-text">{% trans "Typography" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'login' %}">
                <span class="sidebar-text">{% trans "Sign In" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'register' %}">
                <span class="sidebar-text">{% trans "Sign Up" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'password_reset' %}">
                <span class="sidebar-text">{% trans "Forgot password" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'password_change' %}">
                <span class="sidebar-text">{% trans "Change password" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'lock' %}">
                <span class="sidebar-text">{% trans "Lock" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'error_404' %}">
                <span class="sidebar-text">{% trans "404 Not Found" %}</span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="{% url 'error_500' %}">
                <span class="sidebar-text">{% trans "500 Not Found" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'bs_tables' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'bs_tables' %}">
                <span class="sidebar-text">{% trans "Bootstrap Tables" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'transaction' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'transaction' %}">
                <span class="sidebar-text">{% trans "Transaction" %}</span>
              </a>
            </li>
            <li class="nav-item {% if 'settings' in segment %}active{% endif %}">
              <a class="nav-link" href="{% url 'settings' %}">
                <span class="sidebar-text">{% trans "Settings" %}</span>
              </a>
            </li>
          </ul>
        </div>
      </li>
      {% endif %}

    </ul>
  </div>
</nav>

<style>

  .nav-item .nav-link{
    min-width: 100%;
  }

  .nav-link {
    width: fit-content;
    padding: 8px !important;
    max-width: 100%;
    text-wrap: wrap;
  }
  
  
  .sidebar__support-btn {
    height: 140px !important;
    width: 100px !important;
    background-color: #1F2937 !important;
  }
</style>