<section class="min-h-full p-3">
  <div class="mb-2 flex items-center justify-between gap-3">
    <h3 class="text-sm font-semibold text-foreground">People</h3>
    <span class="text-xs text-muted-foreground">{{ matchingUsers().length }}</span>
  </div>

  @if (friendResults().length > 0) {
    <div class="mb-3">
      <div class="mb-1 flex items-center justify-between">
        <h4 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Friends</h4>
        <span class="text-xs text-muted-foreground">{{ friendResults().length }}</span>
      </div>

      <div class="space-y-1.5">
        @for (user of friendResults(); track user.id) {
          <div
            class="group flex items-center gap-2 rounded-lg border border-emerald-500/25 bg-emerald-500/10 p-2"
            [attr.data-testid]="'friend-card-' + userKey(user)"
          >
            <app-user-avatar
              [avatarUrl]="user.avatarUrl"
              [name]="user.displayName"
              [showStatusBadge]="true"
              [status]="user.status"
              size="sm"
            />

            <div class="min-w-0 flex-1">
              <p class="truncate text-sm font-semibold text-foreground">{{ user.displayName }}</p>
              <p class="truncate text-xs text-muted-foreground">{{ user.username }}</p>
            </div>

            <div
              class="pointer-events-none flex scale-95 shrink-0 items-center gap-2 opacity-0 transition-[opacity,transform] duration-75 ease-out group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100"
            >
              <app-friend-button [user]="user" />
              <button
                type="button"
                [attr.data-testid]="'message-friend-' + userKey(user)"
                class="grid h-8 w-8 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
                [attr.aria-label]="'Message ' + user.displayName"
                [title]="'Message ' + user.displayName"
                (click)="messageUser(user)"
              >
                <ng-icon
                  name="lucideMessageCircle"
                  class="h-4 w-4"
                />
              </button>
            </div>
          </div>
        }
      </div>
    </div>
  }

  @if (friendResults().length > 0) {
    <div class="mb-1 flex items-center justify-between">
      <h4 class="text-xs font-semibold uppercase tracking-wide text-muted-foreground">Others</h4>
      <span class="text-xs text-muted-foreground">{{ results().length }}</span>
    </div>
  }

  @if (matchingUsers().length === 0) {
    <div class="flex items-center gap-2 rounded-lg border border-border bg-card px-3 py-3 text-sm text-muted-foreground">
      <ng-icon
        name="lucideSearch"
        class="h-4 w-4"
      />
      No users found
    </div>
  } @else {
    <div class="space-y-1.5">
      @for (user of results(); track user.id) {
        <div
          class="group flex items-center gap-2 rounded-lg border border-border bg-card p-2 transition-colors hover:bg-card/80"
          [attr.data-testid]="'user-card-' + userKey(user)"
        >
          <app-user-avatar
            [avatarUrl]="user.avatarUrl"
            [name]="user.displayName"
            [showStatusBadge]="true"
            [status]="user.status"
            size="sm"
          />

          <div class="min-w-0 flex-1">
            <div class="flex items-center gap-2">
              <p class="truncate text-sm font-semibold text-foreground">{{ user.displayName }}</p>
            </div>
            <p class="truncate text-xs text-muted-foreground">{{ user.username }}</p>
            @if (user.description) {
              <p class="line-clamp-1 text-xs text-muted-foreground">{{ user.description }}</p>
            }
          </div>

          <div
            class="pointer-events-none flex scale-95 shrink-0 items-center gap-2 opacity-0 transition-[opacity,transform] duration-75 ease-out group-hover:pointer-events-auto group-hover:scale-100 group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:scale-100 group-focus-within:opacity-100"
          >
            <app-friend-button [user]="user" />
            <button
              type="button"
              [attr.data-testid]="'message-user-' + userKey(user)"
              class="grid h-8 w-8 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary/90"
              [attr.aria-label]="'Message ' + user.displayName"
              [title]="'Message ' + user.displayName"
              (click)="messageUser(user)"
            >
              <ng-icon
                name="lucideMessageCircle"
                class="h-4 w-4"
              />
            </button>
          </div>
        </div>
      }
    </div>
  }
</section>
