<div class="picker">

  <!-- Chips des pages déjà liées -->
  @if (linkedPages.length > 0) {
    <div class="linked-chips">
      @for (p of linkedPages; track p) {
        <span class="chip">
          <a
            class="chip-label"
            [href]="pageUrl(p.id!)"
            target="_blank"
            rel="noopener"
            [title]="'loreLinkPicker.openInNewTab' | translate">
            <lucide-icon [img]="Link2" [size]="12"></lucide-icon>
            {{ p.title }}
          </a>
          <button type="button" class="chip-remove" (click)="remove(p.id!)" [title]="'loreLinkPicker.removeLink' | translate">
            <lucide-icon [img]="X" [size]="12"></lucide-icon>
          </button>
        </span>
      }
    </div>
  }

  <!-- Input + dropdown de suggestions -->
  <div class="search-wrapper">
    <input
      type="text"
      class="search-input"
      [placeholder]="'loreLinkPicker.searchPlaceholder' | translate"
      [(ngModel)]="query"
      (focus)="dropdownOpen = true"
      (blur)="onBlur()" />

    @if (dropdownOpen && suggestions.length > 0) {
      <ul class="suggestions">
        @for (p of suggestions; track p) {
          <li (mousedown)="add(p)">
            {{ p.title }}
          </li>
        }
      </ul>
    }

    @if (dropdownOpen && query && suggestions.length === 0) {
      <p class="empty-hint">
        {{ 'loreLinkPicker.noMatch' | translate }}
      </p>
    }
  </div>

</div>
