<!-- eslint-disable @angular-eslint/template/prefer-ngsrc -->
<div class="mt-2 flex w-full flex-col items-center gap-2 border-b border-border/70 pb-2">
  <div class="group/server relative flex w-full justify-center">
    <button
      type="button"
      class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent text-muted-foreground transition-[border-radius,box-shadow,background-color,color] duration-100 hover:rounded-lg hover:bg-card hover:text-foreground"
      title="Direct Messages"
      aria-label="Direct Messages"
      [ngClass]="isOnDirectMessages() ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10 text-foreground' : 'rounded-xl bg-card'"
      [attr.aria-current]="isOnDirectMessages() ? 'page' : null"
      (click)="openDirectMessages()"
    >
      <ng-icon
        name="lucideMessageCircle"
        class="h-4 w-4"
      />
      @if (directMessages.totalUnreadCount() > 0) {
        <span class="dm-rail-slide-in absolute -right-1 -top-1 h-3 w-3 rounded-full bg-amber-400 ring-2 ring-card"></span>
      }
    </button>
  </div>

  @for (item of railItems(); track item.id) {
    <div class="group/server relative flex w-full justify-center">
      <button
        type="button"
        class="relative z-10 flex h-10 w-10 cursor-pointer flex-shrink-0 items-center justify-center border border-transparent transition-[border-radius,box-shadow,background-color] duration-100 hover:rounded-lg hover:bg-card"
        [class.dm-rail-slide-in]="!item.isExiting"
        [class.dm-rail-slide-out]="item.isExiting"
        [class.pointer-events-none]="item.isExiting"
        [ngClass]="isSelectedItem(item) ? 'rounded-lg ring-2 ring-primary/40 bg-primary/10' : 'rounded-xl bg-card'"
        [title]="item.label"
        [attr.aria-current]="isSelectedItem(item) ? 'page' : null"
        (click)="openItem(item)"
      >
        <div class="h-full w-full overflow-hidden rounded-[inherit]">
          @if (item.avatarUrl) {
            <img
              [src]="item.avatarUrl"
              [alt]="item.label"
              class="h-full w-full object-cover"
            />
          } @else {
            <div
              class="flex h-full w-full items-center justify-center bg-secondary transition-colors"
              [class.bg-primary/15]="isSelectedItem(item)"
            >
              <span
                class="text-sm font-semibold text-muted-foreground transition-colors"
                [class.text-foreground]="isSelectedItem(item)"
                >{{ initial(item.label) }}</span
              >
            </div>
          }
        </div>

        <span
          class="absolute -bottom-1 -right-1 grid h-4 w-4 place-items-center rounded-full bg-secondary text-muted-foreground shadow-sm ring-2 ring-card"
        >
          <ng-icon
            name="lucideUser"
            class="h-2.5 w-2.5"
          />
        </span>

        @if (!item.isExiting && item.unreadCount > 0) {
          <span class="absolute -right-1 -top-1 min-w-5 rounded-full bg-amber-400 px-1.5 py-0.5 text-[10px] font-semibold text-black shadow-sm">
            {{ formatUnreadCount(item.unreadCount) }}
          </span>
        }
      </button>
    </div>
  }
</div>
