<ul class="navbar-nav ml-auto">
    <li class="nav-item dropdown">
      <a class="nav-link count-indicator">
        <i class="fas fa-broadcast-tower
        {% if data.get('update_available') %}
            text-danger
        {% end %}
        "></i>
<!--        <span class="count bg-success">3</span>-->
      </a>
    </li>

    <li class="nav-item dropdown">
      <a class="nav-link count-indicator" href="/panel/panel_config">
        <i class="fas fa-cogs"></i>
      </a>
    </li>

    <li class="nav-item dropdown user-dropdown">
      <a class="nav-link dropdown-toggle" id="UserDropdown" href="#" data-toggle="dropdown" aria-expanded="false">
        <img class="img-xs rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image"> </a>
      <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
        <div class="dropdown-header text-center">
          <img class="img-md rounded-circle profile-picture" onerror="pfpError(this)" src="{{ data['user_data']['pfp'] }}" alt="Profile image">
          <p class="mb-1 mt-3 font-weight-semibold">{{ data['user_data']['username'] }}</p>
          <p class="font-weight-light text-muted mb-0">Roles: </p>
          {% for r in data['user_role'] %}            
            <p class="font-weight-light text-muted mb-0">{{ r }}</p>
          {% end %}
          {% if data.get('api_key') %}
          <p class="mt-3">Logged in as API key "{{ data['api_key']['name'] }}"</p>
          {% end %}
          <p class="font-weight-light text-muted mb-0">Email: {{ data['user_data']['email'] }}</p>
        </div>
        {% if data['user_data']['preparing'] %}
        <span class="dropdown-item" id="support_progress"><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs', data['lang']) }}<br><br></span>
        <span class="dropdown-item" id="support_progress"><div class="support_progress" style="height: 15px; width: 100%;">
          <div class="progress-bar progress-bar-striped progress-bar-animated" id="logs_progress_bar" role="progressbar" style="width:0%;" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">0%</div>
        </div></span>
        {% else %}
        <a class="dropdown-item" id="support_logs" ><i class="dropdown-item-icon mdi mdi-download-outline text-primary"></i>{{ translate('notify', 'supportLogs', data['lang']) }}</i></a>
        {% end %}
        {% if data['superuser'] %}
        <a class="dropdown-item" href="/panel/activity_logs"><i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary"></i>{{ translate('notify', 'activityLog', data['lang']) }}</a>
        {% end %}
        <a class="dropdown-item" href="/public/logout"><i class="dropdown-item-icon mdi mdi-power text-primary"></i>{{ translate('notify', 'logout', data['lang']) }}</a>
      </div>
    </li>
  </ul>

  <script>
    function pfpError(image) {
    image.onerror = "";
    image.src = "/static/assets/images/faces-clipart/pic-3.png";
    return true;
  }
  </script>