<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">{{ 'servers.find.title' | translate }}</h1>
        <p class="truncate text-xs text-muted-foreground">{{ 'servers.find.subtitle' | translate }}</p>
      </div>
    </header>

    <app-server-browser
      class="min-h-0 flex-1"
      [discoverySections]="discoverySections()"
      [showMyServers]="true"
      [searchPlaceholder]="searchPlaceholder"
      [emptyStateTitle]="emptyStateTitle"
      [emptyStateMessage]="emptyStateMessage"
    />
  </div>
</ng-template>

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