{% load i18n %}
{% load labelbase_tags %}
{% load sekizai_tags %}
{% load bootstrap %}

<div class="dropdown-menu dropdown-menu-end py-0 dropdown-profile shadow border border-300" aria-labelledby="navbarDropdownUser" data-bs-popper="static">
    <div class="card position-relative border-0 flex">

        <div class="card-body p-0">
            <div class="text-center pt-4 pb-3">
                <img class="rounded-circle" src="{{ user.profile.avatar_url }}" width="100px" height="100px" alt="">
                <h6 class="mt-2 text-black">{{ user.username }}</h6>
            </div>
        </div>
        <div class="overflow-auto scrollbar" style="height: 10rem;">
            <ul  class="profile nav d-flex flex-column mb-2 pb-1">
              <li class="nav-item">
                <a class="nav-link {% block nav_user_notifications %}{% endblock %}"  href="JavaScript:void(0);"  onclick="window.location='{% url 'userprofile' %}';"><span data-feather="bell" class="align-text-bottom"></span> Notifications</a>
              </li>

              <li class="nav-item">
                <a class="nav-link {% block nav_userprofile %}{% endblock %}"  href="JavaScript:void(0);"  onclick="window.location='{% url 'userprofile' %}';"><span data-feather="user" class="align-text-bottom"></span> Profile Settings</a>
              </li>
              <li class="nav-item">
                <a class="nav-link {% block nav_profile %}{% endblock %}"  href="JavaScript:void(0);"  onclick="window.location='{% url 'two_factor:profile' %}';">{% if user.otp_device %}<span data-feather="shield" class="align-text-bottom"></span>{% else %}<span data-feather="shield-off" class="align-text-bottom"></span>{% endif %} {% trans "Account Security" %}</a>
              </li>
              <li class="nav-item">
                  <a class="nav-link  {% block nav_apikey %}{% endblock %}" href="JavaScript:void(0);" onclick="window.location='{% url 'apikey' %}';"><span data-feather="send" class="align-text-bottom"></span> API Key & Reference</a>
              </li>
              {% if request.user.profile.use_chatwoot %}
              {% else %}
              <li class="nav-item">
                  <a class="nav-link" href="JavaScript:void(0);" onclick="$('#chatModal').modal('show');">
                    <span data-feather="message-square" class="align-text-bottom"></span> Support Chat
                  </a>
              </li>
              {% endif %}
            </ul>

        </div>
        <div class="card-footer p-0 border-top">
            <ul class="nav d-flex flex-column my-3">


              {% comment %}

              <li class="nav-item"><a class="nav-link px-3" href="#!">Add another account  </a></li>
                <!--li class="nav-item"><a class="nav-link px-3" href="#!">Switch account  </a></li-->
              {% endcomment %}
            </ul>
            {% comment %}
            <hr>
            {% endcomment %}
            <div class="px-3">
                <ul  class="profile nav d-flex flex-column mb-2 pb-1">
                  <li class="nav-item">
                      <a class="nav-link btn btn-outline-secondary"  href="JavaScript:void(0);"  onclick="window.location='{% url 'logout' %}';"><span data-feather="log-out" class="align-text-bottom"></span> {% trans "Logout" %}</a>
                  </li>
                </ul>
            </div>
            <div class="my-2 text-center"><small>
                <a class="text-600 me-1 termslink"  href="JavaScript:void(0);"  onclick="window.location='{% url 'privacy_policy' %}';">Privacy Policy</a>•<a class="text-600 mx-1 termslink"  href="JavaScript:void(0);"  onclick="window.location='{% url 'terms' %}';">Terms</a>•<a class="text-600 mx-1 termslink">v2.2.3</a></small>
            </div>
        </div>
    </div>
</div>