<form
  class="lookup-demo-form"
  novalidate
  [formGroup]="favoritesForm"
  (ngSubmit)="onSubmit()"
>
  <sky-input-box
    data-sky-id="favorite-names-field"
    helpPopoverContent="A name can be selected from the list or added as a new name."
    hintText="Choose a name from the list or add a new name."
    labelText="Favorite names"
    stacked
  >
    <sky-lookup
      formControlName="favoriteNames"
      idProperty="name"
      [enableShowMore]="true"
      [searchResultTemplate]="dropdownItemTemplate"
      [showAddButton]="true"
      [showMoreConfig]="showMoreConfig"
      (addClick)="addClick($event)"
      (searchAsync)="searchAsync($event)"
    />
  </sky-input-box>
  <div
    class="sky-border-dark sky-rounded-corners sky-padding-even-md sky-margin-stacked-lg"
  >
    <strong>Form model:</strong>
    <pre>{{ favoritesForm.value | json }}</pre>
  </div>
  <button class="sky-btn sky-btn-default" type="submit">Submit</button>
</form>

<ng-template #dropdownItemTemplate let-item="item">
  <span class="lookup-demo-template-item">
    <strong class="lookup-demo-template-name">{{ item.name }}</strong
    ><br />
    <span class="lookup-demo-template-formal-name">
      {{ item.formal }}
    </span>
  </span>
</ng-template>
<ng-template #modalItemTemplate let-item="item">
  <span class="lookup-demo-template-item">
    <span class="lookup-demo-template-name">{{ item.name }}</span
    ><br />
    <i class="lookup-demo-template-formal-name">{{ item.formal }}</i>
  </span>
</ng-template>
