<div class="flex h-full min-h-0 flex-col">
  <header class="flex items-center gap-3 border-b border-border px-4 py-3">
    <a
      routerLink="/dashboard"
      [attr.aria-label]="'common.actions.backToDashboard' | translate"
      class="grid h-9 w-9 shrink-0 place-items-center rounded-lg border border-border bg-secondary text-muted-foreground transition-colors hover:bg-secondary/80"
    >
      <ng-icon
        name="lucideArrowLeft"
        class="h-5 w-5"
      />
    </a>
    <div class="min-w-0">
      <h1 class="truncate text-lg font-semibold text-foreground">{{ 'servers.create.title' | translate }}</h1>
      <p class="truncate text-xs text-muted-foreground">{{ 'servers.create.subtitle' | translate }}</p>
    </div>
  </header>

  <div class="min-h-0 flex-1 overflow-y-auto">
    <form
      class="mx-auto w-full max-w-lg space-y-6 p-4 sm:p-6"
      (ngSubmit)="createServer()"
    >
      <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-name"
          class="mb-1 block text-sm font-medium text-foreground"
          >{{ 'servers.create.serverName' | translate }}</label
        >
        <input
          id="create-server-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-description"
          class="mb-1 block text-sm font-medium text-foreground"
          >{{ 'servers.create.descriptionOptional' | translate }}</label
        >
        <textarea
          id="create-server-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-topic"
                class="mb-1 block text-sm font-medium text-foreground"
                >{{ 'servers.create.topicOptional' | translate }}</label
              >
              <input
                id="create-server-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-signal-endpoint"
                class="mb-1 block text-sm font-medium text-foreground"
                >{{ 'servers.create.signalEndpoint' | translate }}</label
              >
              <select
                id="create-server-signal-endpoint"
                name="sourceId"
                [(ngModel)]="sourceId"
                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-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-private"
                class="text-sm text-foreground"
                >{{ 'servers.create.privateServer' | translate }}</label
              >
            </div>

            <div>
              <label
                for="create-server-password"
                class="mb-1 block text-sm font-medium text-foreground"
                >{{ 'servers.create.passwordOptional' | translate }}</label
              >
              <input
                id="create-server-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>

      <div class="flex gap-3 pt-2">
        <button
          id="create-server-cancel"
          type="button"
          class="flex-1 rounded-lg bg-secondary px-4 py-2 text-foreground transition-colors hover:bg-secondary/80"
          (click)="cancel()"
        >
          {{ 'common.actions.cancel' | translate }}
        </button>
        <button
          id="create-server-submit"
          type="submit"
          class="flex-1 rounded-lg bg-primary px-4 py-2 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>
    </form>
  </div>
</div>
