<div class="ner-management page-spacing">
  <header>
    <h1 class="page-title">{{ 'generic.named-entities' | translate }}</h1>
  </header>

  <div class="ner-container">
    <div class="ner-family-list-container">
      <ul class="nsi-list ner-family-list">
        @for (family of nerFamilies | async; track family.key) {
          <li
            class="ner-family"
            [class.selected]="family.key === selectedFamily?.key"
            (click)="selectFamily(family)">
            <div
              class="family-color"
              [style.background-color]="family.color || familyColors[family.key || '']"></div>
            <div class="family-name">
              {{ family.title }}
            </div>
          </li>
        }
      </ul>
    </div>

    @if (selectedFamily) {
      <div class="selected-family-container">
        <div class="family-toolbar">
          <div>
            <pa-input
              icon="search"
              [value]="nerQuery"
              (valueChange)="onNerQueryChange($event)">
              {{ 'stash.search' | translate }}
            </pa-input>
          </div>
        </div>

        <app-entity-list
          [family]="selectedFamily"
          [filterQuery]="nerQuery"></app-entity-list>
      </div>
    }
  </div>
</div>
