<form novalidate [formGroup]="form">
  <label id="my-lookup-label"> My friends </label>
  <sky-lookup
    #standardLookup
    id="my-lookup"
    formControlName="friends"
    [ariaLabel]="ariaLabel"
    [ariaLabelledBy]="ariaLabelledBy"
    [autocompleteAttribute]="autocompleteAttribute"
    [data]="data"
    [descriptorProperty]="descriptorProperty"
    [enableShowMore]="enableShowMore"
    [idProperty]="idProperty"
    [placeholderText]="placeholderText"
    [propertiesToSearch]="propertiesToSearch"
    [searchResultTemplate]="enabledSearchResultTemplate"
    [search]="customSearch"
    [searchFilters]="customSearchFilters"
    [selectMode]="selectMode"
    [showAddButton]="showAddButton"
    [showMoreConfig]="showMoreConfig"
    [wrapperClass]="wrapperClass"
    (addClick)="addButtonClicked($event)"
  />
</form>

<ng-template #customSearchResultTemplate let-item="item">
  {{ item.description }}
</ng-template>

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

<form novalidate [formGroup]="asyncForm">
  <label id="my-async-lookup-label"> My friends (async) </label>
  <sky-lookup
    #asyncLookup
    id="my-async-lookup"
    formControlName="friends"
    [ariaLabel]="ariaLabel"
    [ariaLabelledBy]="ariaLabelledBy"
    [autocompleteAttribute]="autocompleteAttribute"
    [data]="data"
    [descriptorProperty]="descriptorProperty"
    [enableShowMore]="enableShowMore"
    [idProperty]="idProperty"
    [placeholderText]="placeholderText"
    [propertiesToSearch]="propertiesToSearch"
    [searchResultTemplate]="enabledSearchResultTemplate"
    [selectMode]="selectMode"
    [showAddButton]="showAddButton"
    [showMoreConfig]="showMoreConfig"
    [wrapperClass]="wrapperClass"
    (addClick)="addButtonClicked($event)"
    (searchAsync)="searchAsync($event)"
  />
</form>
<button class="sky-btn sky-btn-primary" id="test-button" type="button">
  Test
</button>
