<ng-template #pageContent>
  <div class="mx-auto flex h-full min-h-0 w-full max-w-5xl 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">{{ 'dm.find.title' | translate }}</h1>
        <p class="truncate text-xs text-muted-foreground">{{ 'dm.find.subtitle' | translate }}</p>
      </div>
    </header>

    <div class="border-b border-border px-4 py-3">
      <div class="relative">
        <ng-icon
          name="lucideSearch"
          class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground"
        />
        <input
          type="text"
          appAutoFocus
          appSelectOnFocus
          [attr.aria-label]="'dm.find.searchAriaLabel' | translate"
          class="h-10 w-full rounded-lg border border-border bg-secondary py-2 pl-10 pr-3 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary"
          [placeholder]="'dm.find.searchPlaceholder' | translate"
          [ngModel]="searchQuery()"
          (ngModelChange)="onSearchChange($event)"
        />
      </div>
    </div>

    @if (hasDiscoverablePeople()) {
      <app-user-search-list
        class="min-h-0 flex-1 overflow-y-auto"
        [searchQuery]="searchQuery()"
      />
    } @else {
      <div class="flex flex-1 flex-col items-center justify-center px-6 py-16 text-center text-muted-foreground">
        <div class="mb-4 grid h-14 w-14 place-items-center rounded-full bg-secondary">
          <ng-icon
            name="lucideUsers"
            class="h-7 w-7 text-muted-foreground"
          />
        </div>
        <p class="text-base font-semibold text-foreground">{{ 'dm.find.emptyTitle' | translate }}</p>
        <p class="mt-1 max-w-sm text-sm">{{ 'dm.find.emptyMessage' | translate }}</p>
        <a
          routerLink="/servers"
          class="mt-5 inline-flex items-center justify-center rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-primary-foreground transition-colors hover:bg-primary/90"
        >
          {{ 'dm.find.findServers' | translate }}
        </a>
      </div>
    }
  </div>
</ng-template>

<ng-container [ngTemplateOutlet]="pageContent" />
