@if (serverData()) {
  <div class="max-w-2xl space-y-5">
    <section>
      <h4 class="text-sm font-semibold text-foreground mb-3">Room Settings</h4>
      @if (!isAdmin()) {
        <p class="text-xs text-muted-foreground mb-3">You are viewing this server's details without server-management permission.</p>
      }
      <div class="space-y-4">
        <div class="rounded-lg border border-border bg-secondary/40 p-4">
          <div class="flex items-center gap-3">
            <div class="grid h-14 w-14 shrink-0 place-items-center overflow-hidden rounded-lg bg-secondary text-base font-semibold text-foreground">
              @if (serverData()?.icon) {
                <div
                  aria-hidden="true"
                  class="h-full w-full bg-cover bg-center bg-no-repeat"
                  [style.backgroundImage]="'url(' + serverData()!.icon + ')'"
                ></div>
              } @else {
                <ng-icon
                  name="lucideImage"
                  class="h-6 w-6 text-muted-foreground"
                />
              }
            </div>

            <div class="min-w-0 flex-1">
              <p class="text-sm font-medium text-foreground">Server Image</p>
              <p class="text-xs text-muted-foreground">Synced to members and shown in server discovery.</p>
              @if (iconError()) {
                <p class="mt-1 text-xs text-destructive">{{ iconError() }}</p>
              }
            </div>

            @if (canManageIcon()) {
              <div class="flex shrink-0 items-center gap-2">
                <label
                  for="server-icon-upload"
                  class="grid h-9 w-9 cursor-pointer place-items-center rounded-lg border border-border bg-card text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                  title="Upload image"
                  aria-label="Upload server image"
                >
                  <ng-icon
                    name="lucideUpload"
                    class="h-4 w-4"
                  />
                </label>
                <input
                  id="server-icon-upload"
                  type="file"
                  accept="image/*"
                  class="sr-only"
                  (change)="onServerIconSelected($event)"
                />

                @if (serverData()?.icon) {
                  <button
                    type="button"
                    class="grid h-9 w-9 place-items-center rounded-lg border border-border bg-card text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
                    title="Remove image"
                    aria-label="Remove server image"
                    (click)="removeServerIcon()"
                  >
                    <ng-icon
                      name="lucideX"
                      class="h-4 w-4"
                    />
                  </button>
                }
              </div>
            }
          </div>
        </div>

        <div>
          <label
            for="room-name"
            class="block text-xs font-medium text-muted-foreground mb-1"
            >Room Name</label
          >
          <input
            type="text"
            [(ngModel)]="roomName"
            [readOnly]="!isAdmin()"
            id="room-name"
            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
            [class.opacity-60]="!isAdmin()"
            [class.cursor-not-allowed]="!isAdmin()"
          />
        </div>
        <div>
          <label
            for="room-description"
            class="block text-xs font-medium text-muted-foreground mb-1"
            >Description</label
          >
          <textarea
            [(ngModel)]="roomDescription"
            [readOnly]="!isAdmin()"
            rows="3"
            id="room-description"
            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary resize-none"
            [class.opacity-60]="!isAdmin()"
            [class.cursor-not-allowed]="!isAdmin()"
          ></textarea>
        </div>
        @if (isAdmin()) {
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-foreground">Private Room</p>
              <p class="text-xs text-muted-foreground">Require approval to join</p>
            </div>
            <button
              (click)="togglePrivate()"
              type="button"
              class="grid h-9 w-9 place-items-center rounded-lg transition-colors"
              [class.bg-primary]="isPrivate()"
              [class.text-primary-foreground]="isPrivate()"
              [class.bg-secondary]="!isPrivate()"
              [class.text-muted-foreground]="!isPrivate()"
            >
              @if (isPrivate()) {
                <ng-icon
                  name="lucideLock"
                  class="w-4 h-4"
                />
              } @else {
                <ng-icon
                  name="lucideUnlock"
                  class="w-4 h-4"
                />
              }
            </button>
          </div>
        } @else {
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-foreground">Private Room</p>
              <p class="text-xs text-muted-foreground">Require approval to join</p>
            </div>
            <span class="text-sm text-muted-foreground">{{ isPrivate() ? 'Yes' : 'No' }}</span>
          </div>
        }
        <div>
          <label
            for="room-max-users"
            class="block text-xs font-medium text-muted-foreground mb-1"
          >
            Max Users (0 = unlimited)
          </label>
          <input
            type="number"
            [(ngModel)]="maxUsers"
            [readOnly]="!isAdmin()"
            min="0"
            id="room-max-users"
            class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
            [class.opacity-60]="!isAdmin()"
            [class.cursor-not-allowed]="!isAdmin()"
          />
        </div>

        @if (isAdmin()) {
          <div class="rounded-lg border border-border bg-secondary/40 p-4 space-y-3">
            <div class="flex items-start justify-between gap-4">
              <div>
                <p class="text-sm font-medium text-foreground">Server Password</p>
                <p class="text-xs text-muted-foreground">
                  @if (hasPassword() && passwordAction() !== 'remove') {
                    Joined members stay whitelisted until they are kicked or banned.
                  } @else {
                    Add an optional password so new members need it to join.
                  }
                </p>
              </div>

              @if (hasPassword() && passwordAction() !== 'remove') {
                <button
                  type="button"
                  (click)="markPasswordForRemoval()"
                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
                >
                  Remove Password
                </button>
              } @else if (hasPassword() && passwordAction() === 'remove') {
                <button
                  type="button"
                  (click)="keepCurrentPassword()"
                  class="rounded-lg border border-border px-3 py-2 text-xs font-medium text-muted-foreground transition-colors hover:bg-secondary"
                >
                  Keep Password
                </button>
              }
            </div>

            <div class="text-xs text-muted-foreground">
              @if (hasPassword() && passwordAction() !== 'remove') {
                Password protection is currently enabled.
              } @else if (hasPassword() && passwordAction() === 'remove') {
                Password protection will be removed when you save.
              } @else {
                Password protection is currently disabled.
              }
            </div>

            <div>
              <label
                for="room-password"
                class="block text-xs font-medium text-muted-foreground mb-1"
              >
                {{ hasPassword() ? 'Set New Password' : 'Set Password' }}
              </label>
              <input
                type="password"
                id="room-password"
                [ngModel]="roomPassword"
                (ngModelChange)="onPasswordInput($event)"
                class="w-full px-3 py-2 bg-secondary rounded-lg border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
                [placeholder]="hasPassword() ? 'Leave blank to keep the current password' : 'Optional password required for new joins'"
              />

              @if (passwordAction() === 'update') {
                <p class="mt-2 text-xs text-muted-foreground">The new password will replace the current one when you save.</p>
              }

              @if (passwordError()) {
                <p class="mt-2 text-xs text-destructive">{{ passwordError() }}</p>
              }
            </div>
          </div>
        } @else {
          <div class="flex items-center justify-between">
            <div>
              <p class="text-sm font-medium text-foreground">Server Password</p>
              <p class="text-xs text-muted-foreground">Invite links bypass the password, but bans still apply.</p>
            </div>
            <span class="text-sm text-muted-foreground">{{ hasPassword() ? 'Enabled' : 'Disabled' }}</span>
          </div>
        }
      </div>
    </section>

    @if (isAdmin()) {
      <button
        (click)="saveServerSettings()"
        type="button"
        class="w-full px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors flex items-center justify-center gap-2 text-sm"
        [class.bg-green-600]="saveSuccess() === 'server'"
        [class.hover:bg-green-600]="saveSuccess() === 'server'"
      >
        <ng-icon
          name="lucideCheck"
          class="w-4 h-4"
        />
        {{ saveSuccess() === 'server' ? 'Saved!' : 'Save Settings' }}
      </button>

      @if (canDeleteServer()) {
        <!-- Danger Zone -->
        <div class="pt-4 border-t border-border">
          <h4 class="text-sm font-medium text-destructive mb-3">Danger Zone</h4>
          <button
            (click)="confirmDeleteRoom()"
            type="button"
            class="w-full px-4 py-2 bg-destructive/10 text-destructive border border-destructive/20 rounded-lg hover:bg-destructive/20 transition-colors flex items-center justify-center gap-2 text-sm"
          >
            <ng-icon
              name="lucideTrash2"
              class="w-4 h-4"
            />
            Delete Room
          </button>
        </div>
      }
    }
  </div>

  <!-- Delete Confirmation (sub-modal) -->
  @if (showDeleteConfirm()) {
    <app-confirm-dialog
      title="Delete Room"
      confirmLabel="Delete Room"
      variant="danger"
      [widthClass]="'w-96 max-w-[90vw]'"
      (confirmed)="deleteRoom()"
      (cancelled)="showDeleteConfirm.set(false)"
    >
      <p>Are you sure you want to delete this room? This action cannot be undone.</p>
    </app-confirm-dialog>
  }
} @else {
  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">Select a server from the sidebar to manage</div>
}