<!--
  Server-creation modal. Two presentations matching the rest of Toju's dialogs:
  - Mobile: rendered through `app-bottom-sheet` so it slides up from the bottom.
  - Desktop: centered modal with backdrop.
-->
@if (isMobile()) {
  <app-bottom-sheet
    [title]="'servers.create.title' | translate"
    [ariaLabel]="'servers.create.title' | translate"
    (dismissed)="cancel()"
  >
    <ng-container *ngTemplateOutlet="form" />
    <div class="flex gap-2 border-t border-border p-3">
      <button
        type="button"
        class="min-h-11 flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
        (click)="cancel()"
      >
        {{ 'common.actions.cancel' | translate }}
      </button>
      <button
        type="submit"
        form="create-server-dialog-form"
        class="min-h-11 flex-1 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        [disabled]="!canCreate"
      >
        {{ 'servers.create.submit' | translate }}
      </button>
    </div>
  </app-bottom-sheet>
} @else {
  <!-- Backdrop -->
  <app-modal-backdrop
    [zIndex]="40"
    [ariaLabel]="'common.actions.closeDialog' | translate"
    (dismissed)="cancel()"
  />

  <!-- Dialog -->
  <div
    appThemeNode="confirmDialogSurface"
    class="fixed left-1/2 top-1/2 z-50 flex max-h-[88vh] w-[460px] max-w-[92vw] -translate-x-1/2 -translate-y-1/2 flex-col rounded-lg border border-border bg-card shadow-lg"
  >
    <div class="border-b border-border p-4">
      <h4 class="font-semibold text-foreground">{{ 'servers.create.title' | translate }}</h4>
      <p class="mt-0.5 text-xs text-muted-foreground">{{ 'servers.create.subtitle' | translate }}</p>
    </div>

    <div class="min-h-0 flex-1 overflow-y-auto">
      <ng-container *ngTemplateOutlet="form" />
    </div>

    <div class="flex gap-2 border-t border-border p-3">
      <button
        type="button"
        class="flex-1 rounded-lg bg-secondary px-3 py-2 text-sm text-foreground transition-colors hover:bg-secondary/80"
        (click)="cancel()"
      >
        {{ 'common.actions.cancel' | translate }}
      </button>
      <button
        id="create-server-dialog-submit"
        type="submit"
        form="create-server-dialog-form"
        class="flex-1 rounded-lg bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90 disabled:cursor-not-allowed disabled:opacity-50"
        [disabled]="!canCreate"
      >
        {{ 'servers.create.submit' | translate }}
      </button>
    </div>
  </div>
}

<!-- Shared form body for both presentations. -->
<ng-template #form>
  <form
    id="create-server-dialog-form"
    class="space-y-5 p-4"
    (ngSubmit)="create()"
  >
    <div>
      <span class="mb-2 block text-sm font-medium text-foreground">{{ 'servers.create.pickCategory' | translate }}</span>
      <div class="flex flex-wrap gap-2">
        @for (category of categories; track category.id) {
          <button
            type="button"
            class="rounded-full border px-3 py-1.5 text-sm font-medium transition-colors"
            [class.border-primary]="selectedCategoryId() === category.id"
            [class.bg-primary/10]="selectedCategoryId() === category.id"
            [class.text-primary]="selectedCategoryId() === category.id"
            [class.border-border]="selectedCategoryId() !== category.id"
            [class.bg-secondary]="selectedCategoryId() !== category.id"
            [class.text-foreground]="selectedCategoryId() !== category.id"
            (click)="selectCategory(category)"
          >
            {{ 'servers.create.categories.' + category.id | translate }}
          </button>
        }
      </div>
    </div>

    <div>
      <label
        for="create-server-dialog-name"
        class="mb-1 block text-sm font-medium text-foreground"
        >{{ 'servers.create.serverName' | translate }}</label
      >
      <input
        id="create-server-dialog-name"
        type="text"
        name="serverName"
        appAutoFocus
        appSelectOnFocus
        [ngModel]="name()"
        (ngModelChange)="name.set($event)"
        [placeholder]="'servers.create.namePlaceholder' | translate"
        class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
      />
    </div>

    <div>
      <label
        for="create-server-dialog-description"
        class="mb-1 block text-sm font-medium text-foreground"
        >{{ 'servers.create.descriptionOptional' | translate }}</label
      >
      <textarea
        id="create-server-dialog-description"
        name="serverDescription"
        [ngModel]="description()"
        (ngModelChange)="description.set($event)"
        [placeholder]="'servers.create.descriptionPlaceholder' | translate"
        rows="3"
        class="w-full resize-none rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
      ></textarea>
    </div>

    <div class="rounded-lg border border-border">
      <button
        type="button"
        class="flex w-full items-center justify-between px-3 py-2.5 text-left text-sm font-medium text-foreground"
        [attr.aria-expanded]="showAdvanced()"
        (click)="toggleAdvanced()"
      >
        <span>{{ 'servers.create.advancedSettings' | translate }}</span>
        <ng-icon
          [name]="showAdvanced() ? 'lucideChevronUp' : 'lucideChevronDown'"
          class="h-4 w-4 text-muted-foreground"
        />
      </button>

      @if (showAdvanced()) {
        <div class="space-y-4 border-t border-border p-3">
          <div>
            <label
              for="create-server-dialog-topic"
              class="mb-1 block text-sm font-medium text-foreground"
              >{{ 'servers.create.topicOptional' | translate }}</label
            >
            <input
              id="create-server-dialog-topic"
              type="text"
              name="serverTopic"
              appSelectOnFocus
              [ngModel]="topic()"
              (ngModelChange)="topic.set($event)"
              [placeholder]="'servers.create.topicPlaceholder' | translate"
              class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
            />
          </div>

          <div>
            <label
              for="create-server-dialog-signal-endpoint"
              class="mb-1 block text-sm font-medium text-foreground"
              >{{ 'servers.create.signalEndpoint' | translate }}</label
            >
            <select
              id="create-server-dialog-signal-endpoint"
              name="sourceId"
              [ngModel]="sourceId()"
              (ngModelChange)="sourceId.set($event)"
              class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground focus:outline-none focus:ring-2 focus:ring-primary"
            >
              @for (endpoint of activeEndpoints(); track endpoint.id) {
                <option [value]="endpoint.id">{{ endpoint.name }} ({{ endpoint.url }})</option>
              }
            </select>
            <p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.signalEndpointHint' | translate }}</p>
          </div>

          <div class="flex items-center gap-2">
            <input
              id="create-server-dialog-private"
              type="checkbox"
              name="isPrivate"
              [ngModel]="isPrivate()"
              (ngModelChange)="isPrivate.set($event)"
              class="h-4 w-4 rounded border-border bg-secondary"
            />
            <label
              for="create-server-dialog-private"
              class="text-sm text-foreground"
              >{{ 'servers.create.privateServer' | translate }}</label
            >
          </div>

          <div>
            <label
              for="create-server-dialog-password"
              class="mb-1 block text-sm font-medium text-foreground"
              >{{ 'servers.create.passwordOptional' | translate }}</label
            >
            <input
              id="create-server-dialog-password"
              type="password"
              name="serverPassword"
              [ngModel]="password()"
              (ngModelChange)="password.set($event)"
              [placeholder]="'servers.create.passwordPlaceholder' | translate"
              class="w-full rounded-lg border border-border bg-secondary px-3 py-2 text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
            />
            <p class="mt-1 text-xs text-muted-foreground">{{ 'servers.create.passwordHint' | translate }}</p>
          </div>
        </div>
      }
    </div>
  </form>
</ng-template>
