@if (server()) {
  <div class="space-y-4 max-w-xl">
    @if (!isAdmin()) {
      <p class="text-xs text-muted-foreground mb-1">You are viewing this server's permissions. Only the server owner can make changes.</p>
    }
    <div class="space-y-2.5">
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Allow Voice Chat</p>
          <p class="text-xs text-muted-foreground">Users can join voice channels</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="allowVoice"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Allow Screen Share</p>
          <p class="text-xs text-muted-foreground">Users can share their screen</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="allowScreenShare"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Allow File Uploads</p>
          <p class="text-xs text-muted-foreground">Users can upload files</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="allowFileUploads"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Slow Mode</p>
          <p class="text-xs text-muted-foreground">Limit message frequency</p>
        </div>
        <select
          [(ngModel)]="slowModeInterval"
          [disabled]="!isAdmin()"
          class="px-3 py-1 bg-secondary rounded border border-border text-foreground text-sm focus:outline-none focus:ring-2 focus:ring-primary"
        >
          <option value="0">Off</option>
          <option value="5">5 seconds</option>
          <option value="10">10 seconds</option>
          <option value="30">30 seconds</option>
          <option value="60">1 minute</option>
        </select>
      </div>

      <!-- Management permissions -->
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Admins Can Manage Rooms</p>
          <p class="text-xs text-muted-foreground">Allow admins to create/modify rooms</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="adminsManageRooms"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Moderators Can Manage Rooms</p>
          <p class="text-xs text-muted-foreground">Allow moderators to create/modify rooms</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="moderatorsManageRooms"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Admins Can Change Server Icon</p>
          <p class="text-xs text-muted-foreground">Grant icon management to admins</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="adminsManageIcon"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
      <div class="flex items-center justify-between p-3 bg-secondary/50 rounded-lg">
        <div>
          <p class="text-sm font-medium text-foreground">Moderators Can Change Server Icon</p>
          <p class="text-xs text-muted-foreground">Grant icon management to moderators</p>
        </div>
        <input
          type="checkbox"
          [(ngModel)]="moderatorsManageIcon"
          [disabled]="!isAdmin()"
          class="w-4 h-4 accent-primary"
        />
      </div>
    </div>

    @if (isAdmin()) {
      <button
        (click)="savePermissions()"
        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() === 'permissions'"
        [class.hover:bg-green-600]="saveSuccess() === 'permissions'"
      >
        <ng-icon
          name="lucideCheck"
          class="w-4 h-4"
        />
        {{ saveSuccess() === 'permissions' ? 'Saved!' : 'Save Permissions' }}
      </button>
    }
  </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>
}