@if (serverData()) {
  <div class="space-y-5 max-w-xl">
    <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 settings as a non-admin. Only the server owner can make changes.
        </p>
      }
      <div class="space-y-4">
        <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="p-2 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>
      </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>

      <!-- 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>
}