<header
  class="sticky-top d-flex align-items-center bg-white px-4 py-3"
  [ngClass]="isMobile ? 'justify-content-between' : 'justify-content-end'"
  style="height: 76px"
>
  <button
    *ngIf="isMobile"
    class="btn btn-sm btn-light"
    type="button"
    (click)="onTriggerMenu()"
  >
    <i class="bi bi-list"></i>
  </button>
  <div class="dropdownHeader d-flex align-items-center">
    <span class="me-2">{{ fullName }} </span>
    <div ngbDropdown>
      <button
        class="btn btn-sm btn-primary no-caret text-capitalize"
        type="button"
        id="userDropdown"
        ngbDropdownToggle
      >
        {{ get2letters(fullName) }}
      </button>
      <div
        ngbDropdownMenu
        display="dynamic"
        placement="bottom-end"
        aria-labelledby="userDropdown"
        class="customDropdown p-4"
      >
        <div class="d-flex mb-4">
          <div
            class="me-3 text-capitalize rounded bg-info d-flex align-items-center justify-content-center text-white"
            style="width: 44px; height: 44px"
          >
            {{ get2letters(fullName) }}
          </div>
          <p class="my-auto">{{ fullName }}</p>
        </div>
        <form>
          <div class="mb-3">
            <label for="email" class="form-label">Email </label>
            <input
              disabled
              value="{{ email }}"
              type="email"
              class="form-control"
              id="email"
              autocomplete="email"
            />
          </div>
        </form>
        <div class="d-flex justify-content-end">
          <button
            type="button"
            class="btn text-white bg-primary me-2"
            (click)="changePassword()"
          >
            Ganti Password
          </button>
          <button
            type="button"
            (click)="onLogout()"
            class="btn text-white bg-danger"
          >
            Logout
          </button>
        </div>
      </div>
    </div>
  </div>
</header>
