<app-modal-backdrop
  [zIndex]="40"
  [ariaLabel]="'shared.dialog.closeDialogAria' | translate"
  (dismissed)="cancelled.emit(undefined)"
/>
<div
  class="fixed left-1/2 top-1/2 z-50 w-[360px] max-w-[calc(100vw-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-lg border border-border bg-card shadow-lg"
>
  <div class="space-y-3 p-4">
    <h4 class="font-semibold text-foreground">{{ 'shared.leaveServer.title' | translate }}</h4>
    <div class="space-y-3 text-sm text-muted-foreground">
      <p>
        {{ 'shared.leaveServer.removeFromList' | translate }}
        <span class="font-medium text-foreground">{{ room().name }}</span>
        {{ 'shared.leaveServer.fromMyServers' | translate }}
      </p>

      @if (isOwner()) {
        <div class="space-y-2 rounded-md border border-border/80 bg-secondary/20 p-3">
          <p class="text-foreground">{{ 'shared.leaveServer.ownerNotice' | translate }}</p>
          <p>{{ 'shared.leaveServer.ownerTransferHint' | translate }}</p>

          @if (ownerCandidates().length > 0) {
            <label class="block space-y-1">
              <span class="text-xs font-medium uppercase tracking-wide text-muted-foreground">
                {{ 'shared.leaveServer.newOwner' | translate }}
              </span>
              <select
                class="w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
                [ngModel]="selectedOwnerKey()"
                (ngModelChange)="selectedOwnerKey.set($event || '')"
              >
                <option value="">{{ 'shared.leaveServer.skipOwnerTransfer' | translate }}</option>
                @for (member of ownerCandidates(); track roomMemberKey(member)) {
                  <option [value]="roomMemberKey(member)">{{ member.displayName }} - {{ roleLabel(member) }}</option>
                }
              </select>
            </label>
          } @else {
            <p>{{ 'shared.leaveServer.noMembersToPromote' | translate }}</p>
          }
        </div>
      }
    </div>
  </div>

  <div class="flex gap-2 border-t border-border p-3">
    <button
      (click)="cancelled.emit(undefined)"
      type="button"
      class="flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
    >
      {{ 'shared.dialog.cancel' | translate }}
    </button>
    <button
      (click)="confirmLeave()"
      type="button"
      class="flex-1 rounded-lg bg-destructive px-3 py-2 text-sm text-destructive-foreground transition-colors hover:bg-destructive/90"
    >
      {{ 'shared.leaveServer.leave' | translate }}
    </button>
  </div>
</div>
