<form novalidate>
  <sky-lookup
    #standardLookup
    id="my-lookup"
    name="friends"
    [ariaLabel]="ariaLabel"
    [ariaLabelledBy]="ariaLabelledBy"
    [required]="required ? true : undefined"
    [data]="data"
    [disabled]="disabled"
    [enableShowMore]="enableShowMore"
    [descriptorProperty]="descriptorProperty"
    [idProperty]="idProperty"
    [placeholderText]="placeholderText"
    [propertiesToSearch]="propertiesToSearch"
    [search]="customSearch"
    [searchResultTemplate]="enabledSearchResultTemplate"
    [selectMode]="selectMode"
    [showAddButton]="showAddButton"
    [showMoreConfig]="showMoreConfig"
    [(ngModel)]="selectedFriends"
    (addClick)="addButtonClicked($event)"
  />
</form>

<ng-template #customSearchResultTemplate let-item="item">
  {{ item.description }}
  <p class="sky-font-deemphasized">{{ item.name }}</p>
</ng-template>

<ng-template #customShowMoreTemplate let-item="item">
  {{ item.name }} - {{ item.birthDate }}
</ng-template>

<form novalidate>
  <sky-lookup
    #asyncLookup
    id="my-async-lookup"
    name="friends"
    [ariaLabel]="ariaLabel"
    [ariaLabelledBy]="ariaLabelledBy"
    [required]="required ? true : undefined"
    [data]="data"
    [disabled]="disabled"
    [enableShowMore]="enableShowMore"
    [descriptorProperty]="descriptorProperty"
    [idProperty]="idProperty"
    [placeholderText]="placeholderText"
    [propertiesToSearch]="propertiesToSearch"
    [searchResultTemplate]="enabledSearchResultTemplate"
    [selectMode]="selectMode"
    [showAddButton]="showAddButton"
    [showMoreConfig]="showMoreConfig"
    [(ngModel)]="selectedFriendsAsync"
    (addClick)="addButtonClicked($event)"
    (searchAsync)="searchAsync($event)"
  />
</form>
<button class="sky-btn sky-btn-primary" id="test-button" type="button">
  Test
</button>
