@if (serverData()) {
  <div class="max-w-2xl space-y-5">
    <section>
      <h4 class="text-sm font-semibold text-foreground mb-3">{{ 'settings.server.title' | translate }}</h4>
      @if (!isAdmin()) {
        <p class="text-xs text-muted-foreground mb-3">{{ 'settings.server.readOnly' | translate }}</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">{{ 'settings.server.image.title' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'settings.server.image.description' | translate }}</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]="'settings.server.image.upload' | translate"
                  [attr.aria-label]="'settings.server.image.uploadAria' | translate"
                >
                  <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]="'settings.server.image.remove' | translate"
                    [attr.aria-label]="'settings.server.image.removeAria' | translate"
                    (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"
            >{{ 'settings.server.roomName' | translate }}</label
          >
          <input
            type="text"
            [(ngModel)]="roomName"
            [readOnly]="!isAdmin()"
            id="room-name"
            appSelectOnFocus
            appSubmitOnEnter
            (submitOnEnter)="saveServerSettings()"
            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"
            >{{ 'settings.server.description' | translate }}</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">{{ 'settings.server.private.label' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'settings.server.private.description' | translate }}</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">{{ 'settings.server.private.label' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'settings.server.private.description' | translate }}</p>
            </div>
            <span class="text-sm text-muted-foreground">{{
              isPrivate() ? ('settings.server.private.yes' | translate) : ('settings.server.private.no' | translate)
            }}</span>
          </div>
        }
        <div>
          <label
            for="room-max-users"
            class="block text-xs font-medium text-muted-foreground mb-1"
          >
            {{ 'settings.server.maxUsers' | translate }}
          </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">{{ 'settings.server.password.title' | translate }}</p>
                <p class="text-xs text-muted-foreground">
                  @if (hasPassword() && passwordAction() !== 'remove') {
                    {{ 'settings.server.password.whitelisted' | translate }}
                  } @else {
                    {{ 'settings.server.password.addOptional' | translate }}
                  }
                </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') {
                {{ 'settings.server.password.enabled' | translate }}
              } @else if (hasPassword() && passwordAction() === 'remove') {
                {{ 'settings.server.password.willRemove' | translate }}
              } @else {
                {{ 'settings.server.password.disabled' | translate }}
              }
            </div>

            <div>
              <label
                for="room-password"
                class="block text-xs font-medium text-muted-foreground mb-1"
              >
                {{ hasPassword() ? ('settings.server.password.setNew' | translate) : ('settings.server.password.set' | translate) }}
              </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()
                    ? ('settings.server.password.keepCurrentPlaceholder' | translate)
                    : ('settings.server.password.optionalPlaceholder' | translate)
                "
              />

              @if (passwordAction() === 'update') {
                <p class="mt-2 text-xs text-muted-foreground">{{ 'settings.server.password.willReplace' | translate }}</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">{{ 'settings.server.password.title' | translate }}</p>
              <p class="text-xs text-muted-foreground">{{ 'settings.server.password.viewerHint' | translate }}</p>
            </div>
            <span class="text-sm text-muted-foreground">{{
              hasPassword() ? ('settings.server.password.enabledShort' | translate) : ('settings.server.password.disabledShort' | translate)
            }}</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' ? ('settings.server.saved' | translate) : ('settings.server.save' | translate) }}
      </button>

      @if (canDeleteServer()) {
        <!-- Danger Zone -->
        <div class="pt-4 border-t border-border">
          <h4 class="text-sm font-medium text-destructive mb-3">{{ 'settings.server.dangerZone' | translate }}</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]="'settings.server.deleteConfirm.title' | translate"
      [confirmLabel]="'settings.server.deleteConfirm.confirm' | translate"
      variant="danger"
      [widthClass]="'w-96 max-w-[90vw]'"
      (confirmed)="deleteRoom()"
      (cancelled)="showDeleteConfirm.set(false)"
    >
      <p>{{ 'settings.server.deleteConfirm.message' | translate }}</p>
    </app-confirm-dialog>
  }
} @else {
  <div class="flex items-center justify-center h-40 text-muted-foreground text-sm">{{ 'settings.server.selectServer' | translate }}</div>
}