{% 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">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> Admin
          </a>
        {% endif %}
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'user:profile' %}">
          <i class="mdi mdi-account"></i> Profile
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="{% url 'user:preferences' %}">
          <i class="mdi mdi-wrench"></i> Preferences
        </a>
      </li>
      <li><hr class="dropdown-divider" /></li>
      <li>
        <a class="dropdown-item" href="{% url 'logout' %}">
          <i class="mdi mdi-logout-variant"></i> 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> Log In
    </a>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown">
      <span class="visually-hidden">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">Dark Mode</span>
        </button>
      </li>
    </ul>
  </div>
{% endif %}