@if (server()) {
  <div class="max-w-2xl space-y-3">
    @if (bannedUsers().length === 0) {
      <p class="text-sm text-muted-foreground text-center py-8">No banned users</p>
    } @else {
      @for (ban of bannedUsers(); track ban.oderId) {
        <div class="flex items-center gap-3 p-3 bg-secondary/50 rounded-lg">
          <div class="w-8 h-8 rounded-full bg-destructive/20 flex items-center justify-center text-destructive font-semibold text-sm">
            {{ ban.displayName?.charAt(0)?.toUpperCase() || '?' }}
          </div>
          <div class="flex-1 min-w-0">
            <p class="text-sm font-medium text-foreground truncate">
              {{ ban.displayName || 'Unknown User' }}
            </p>
            @if (ban.reason) {
              <p class="text-xs text-muted-foreground truncate">Reason: {{ ban.reason }}</p>
            }
            @if (ban.expiresAt) {
              <p class="text-xs text-muted-foreground">Expires: {{ formatExpiry(ban.expiresAt) }}</p>
            } @else {
              <p class="text-xs text-destructive">Permanent</p>
            }
          </div>
          @if (isAdmin()) {
            <button
              type="button"
              (click)="unbanUser(ban)"
              class="grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
            >
              <ng-icon
                name="lucideX"
                class="w-4 h-4"
              />
            </button>
          }
        </div>
      }
    }
  </div>
} @else {
  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">Select a server from the sidebar to manage</div>
}