<button
  type="button"
  class="user-menu__trigger"
  [cdkMenuTriggerFor]="userMenu"
  [attr.aria-label]="triggerAriaLabel()"
>
  <span class="user-menu__avatar" aria-hidden="true">{{ initials() }}</span>
  <lib-icon name="chevron-down" [size]="14" />
</button>

<ng-template #userMenu>
  <div cdkMenu class="user-menu__panel" role="menu" [attr.aria-label]="triggerAriaLabel()">
    <div class="user-menu__header" role="presentation">
      <span class="user-menu__header-label">{{ signedInAsLabel() }}</span>
      <strong class="user-menu__header-name">{{ displayName() }}</strong>
      <span class="user-menu__header-username">{{ username() }}</span>
    </div>

    @if (items().length > 0) {
    <div class="user-menu__separator" role="separator"></div>
    <div class="user-menu__group" role="group">
      @for (item of items(); track item.label) { @if (item.disabled) {
      <span class="user-menu__item user-menu__item--disabled" role="menuitem" aria-disabled="true">
        @if (item.icon) {
        <span class="user-menu__icon">
          <lib-icon [name]="item.icon" [size]="16" />
        </span>
        }
        <span class="user-menu__label">{{ item.label }}</span>
        @if (item.badge) {
        <span class="user-menu__badge">{{ item.badge }}</span>
        }
      </span>
      } @else if (item.href) {
      <a cdkMenuItem class="user-menu__item" role="menuitem" [attr.href]="item.href">
        @if (item.icon) {
        <span class="user-menu__icon">
          <lib-icon [name]="item.icon" [size]="16" />
        </span>
        }
        <span class="user-menu__label">{{ item.label }}</span>
        @if (item.badge) {
        <span class="user-menu__badge">{{ item.badge }}</span>
        }
      </a>
      } @else if (item.routerLink) {
      <a cdkMenuItem class="user-menu__item" role="menuitem" [routerLink]="item.routerLink">
        @if (item.icon) {
        <span class="user-menu__icon">
          <lib-icon [name]="item.icon" [size]="16" />
        </span>
        }
        <span class="user-menu__label">{{ item.label }}</span>
        @if (item.badge) {
        <span class="user-menu__badge">{{ item.badge }}</span>
        }
      </a>
      } }
    </div>
    }

    <div class="user-menu__separator" role="separator"></div>
    <button
      type="button"
      cdkMenuItem
      class="user-menu__item user-menu__item--sign-out"
      role="menuitem"
      (click)="signOut.emit()"
    >
      <span class="user-menu__icon">
        <lib-icon name="log-out" [size]="16" />
      </span>
      <span class="user-menu__label">{{ signOutLabel() }}</span>
    </button>
  </div>
</ng-template>
