@if (server()) {
  <div class="space-y-3 max-w-3xl">
    @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="space-y-3 rounded-lg bg-secondary/50 p-3">
          <div class="flex items-center gap-3">
            <app-user-avatar
              [name]="member.displayName || '?'"
              size="sm"
            />
            <div class="min-w-0 flex-1">
              <div class="flex items-center gap-1.5">
                <p class="truncate text-sm font-medium text-foreground">
                  {{ member.displayName }}
                </p>
                @if (member.isOnline) {
                  <span class="rounded bg-emerald-500/20 px-1 py-0.5 text-[10px] text-emerald-400">Online</span>
                }
                <span class="rounded bg-primary/10 px-1 py-0.5 text-[10px] text-primary">{{ member.displayRoleName }}</span>
              </div>
              <p class="text-xs text-muted-foreground">{{ member.username }}</p>
            </div>
            <div class="flex items-center gap-1">
              @if (canKickMembers(member)) {
                <button
                  type="button"
                  (click)="kickMember(member)"
                  class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
                  title="Kick"
                >
                  <ng-icon
                    name="lucideUserX"
                    class="h-4 w-4"
                  />
                </button>
              }
              @if (canBanMembers(member)) {
                <button
                  type="button"
                  (click)="banMember(member)"
                  class="grid h-8 w-8 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/20 hover:text-destructive"
                  title="Ban"
                >
                  <ng-icon
                    name="lucideBan"
                    class="h-4 w-4"
                  />
                </button>
              }
            </div>
          </div>

          @if (assignableRoles().length > 0 && canChangeRoles(member)) {
            <div class="space-y-2 border-t border-border/50 pt-3">
              <p class="text-xs font-medium uppercase tracking-[0.16em] text-muted-foreground">Assigned Roles</p>
              <div class="flex flex-wrap gap-2">
                @for (role of assignableRoles(); track role.id) {
                  <label class="flex items-center gap-2 rounded-full border border-border bg-background/70 px-3 py-1 text-xs text-foreground">
                    <input
                      type="checkbox"
                      [checked]="member.assignedRoleIds.includes(role.id)"
                      (change)="toggleRole(member, role.id, $event)"
                      class="h-3.5 w-3.5 accent-primary"
                    />
                    <span
                      class="inline-block h-2.5 w-2.5 rounded-full"
                      [style.background]="role.color || '#94a3b8'"
                    ></span>
                    <span>{{ role.name }}</span>
                  </label>
                }
              </div>
            </div>
          } @else if (assignableRoles().length > 0) {
            <p class="border-t border-border/50 pt-3 text-xs text-muted-foreground">
              You can view this member's roles, but you do not have permission to change them.
            </p>
          }
        </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>
}