{% load i18n %}
{% if request.user.is_authenticated %}
  <div class="dropdown profile-button">
    <button type="button" aria-expanded="false" data-bs-toggle="dropdown" class="btn btn-outline-secondary dropdown-toggle w-100">
      <i class="mdi mdi-account"></i>
      <span id="navbar_user">{{ request.user|truncatechars:"30" }}</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li>
        <button type="button" class="dropdown-item color-mode-toggle">
          <i class="color-mode-icon mdi mdi-lightbulb"></i>
          <span class="color-mode-text">{% trans "Dark Mode" %}</span>
        </button>
      </li>
      <li>
        {% if request.user.is_staff %}
          <a class="dropdown-item" href="{% url 'admin:index' %}">
            <i class="mdi mdi-cog"></i> {% trans "Admin" %}
          </a>
        {% endif %}
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'account:profile' %}">
          <i class="mdi mdi-account"></i> {% trans "Profile" %}
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'account:bookmarks' %}">
          <i class="mdi mdi-bookmark"></i> {% trans "Bookmarks" %}
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'account:preferences' %}">
          <i class="mdi mdi-wrench"></i> {% trans "Preferences" %}
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'account:usertoken_list' %}">
          <i class="mdi mdi-key"></i> {% trans "API Tokens" %}
        </a>
      </li>
      <li><hr class="dropdown-divider" /></li>
      <li>
        <a class="dropdown-item" href="{% url 'logout' %}">
          <i class="mdi mdi-logout-variant"></i> {% trans "Log Out" %}
        </a>
      </li>
    </ul>
  </div>
{% else %}
  <div class="btn-group">
    <a class="btn btn-primary ws-nowrap" type="button" href="{% url 'login' %}?next={{ request.path }}">
      <i class="mdi mdi-login-variant"></i> {% trans "Log In" %}
    </a>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
      <span class="visually-hidden">{% trans "Toggle Dropdown" %}</span>
    </button>
    <ul class="dropdown-menu dropdown-menu-end">
      <li>
        <button class="dropdown-item color-mode-toggle">
          <i class="color-mode-icon mdi mdi-lightbulb"></i>
          <span class="color-mode-text">{% trans "Dark Mode" %}</span>
        </button>
      </li>
    </ul>
  </div>
{% endif %}
