@if (server()) {
  <div class="space-y-3 max-w-xl">
    @if (members().length === 0) {
      <p class="text-sm text-muted-foreground text-center py-8">No other members found for this server</p>
    } @else {
      @for (member of members(); track member.oderId || member.id) {
        <div class="flex items-center gap-3 p-3 bg-secondary/50 rounded-lg">
          <app-user-avatar
            [name]="member.displayName || '?'"
            size="sm"
          />
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-1.5">
              <p class="text-sm font-medium text-foreground truncate">
                {{ member.displayName }}
              </p>
              @if (member.isOnline) {
                <span class="text-[10px] bg-emerald-500/20 text-emerald-400 px-1 py-0.5 rounded">Online</span>
              }
              @if (member.role === 'host') {
                <span class="text-[10px] bg-yellow-500/20 text-yellow-400 px-1 py-0.5 rounded">Owner</span>
              } @else if (member.role === 'admin') {
                <span class="text-[10px] bg-blue-500/20 text-blue-400 px-1 py-0.5 rounded">Admin</span>
              } @else if (member.role === 'moderator') {
                <span class="text-[10px] bg-green-500/20 text-green-400 px-1 py-0.5 rounded">Mod</span>
              }
            </div>
          </div>
          @if (member.role !== 'host' && isAdmin()) {
            <div class="flex items-center gap-1">
              @if (canChangeRoles()) {
                <select
                  [ngModel]="member.role"
                  (ngModelChange)="changeRole(member, $event)"
                  class="text-xs px-2 py-1 bg-secondary rounded border border-border text-foreground focus:outline-none focus:ring-1 focus:ring-primary"
                >
                  <option value="member">Member</option>
                  <option value="moderator">Moderator</option>
                  <option value="admin">Admin</option>
                </select>
              }
              @if (canKickMembers()) {
                <button
                  (click)="kickMember(member)"
                  class="p-1 rounded hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
                  title="Kick"
                >
                  <ng-icon
                    name="lucideUserX"
                    class="w-4 h-4"
                  />
                </button>
              }
              @if (canBanMembers()) {
                <button
                  (click)="banMember(member)"
                  class="p-1 rounded hover:bg-destructive/20 text-muted-foreground hover:text-destructive transition-colors"
                  title="Ban"
                >
                  <ng-icon
                    name="lucideBan"
                    class="w-4 h-4"
                  />
                </button>
              }
            </div>
          }
        </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>
}