<div class="app-screenshot" id="lookup-visual">
  <form novalidate [formGroup]="friendsForm">
    <div class="sky-form-group">
      <label class="sky-control-label" id="my-friends-label">
        Who are your friends?
      </label>
      <sky-lookup
        ariaLabelledBy="my-friends-label"
        formControlName="friends"
        idProperty="id"
        placeholderText="Type a person's name..."
        [data]="people"
        [disabled]="disabled"
        [enableShowMore]="true"
        [debounceTime]="1000"
        [showAddButton]="true"
      />
    </div>

    <p>
      <button
        class="sky-btn sky-btn-default"
        id="btn-disable-lookup"
        type="button"
        [ngClass]="{ 'sky-btn-disabled': disabled }"
        (click)="disableLookup()"
      >
        Disable lookup
      </button>
    </p>

    <sky-input-box
      hintText="I'm some help text."
      labelText="Who are your friends?"
      mode="detect"
      class="sky-margin-stacked-lg"
      [disabled]="disabled"
    >
      <sky-lookup
        required
        formControlName="friends2"
        idProperty="id"
        [data]="people"
        [debounceTime]="1000"
        [disabled]="disabled"
        [enableShowMore]="true"
      />
    </sky-input-box>
  </form>
</div>

<table>
  <tr>
    <th>Touched</th>
    <td>{{ friendsForm.touched }}</td>
  </tr>
  <tr>
    <th>Pristine</th>
    <td>{{ friendsForm.pristine }}</td>
  </tr>
  <tr>
    <th>Valid</th>
    <td>{{ friendsForm.valid }}</td>
  </tr>
  <tr>
    <th>Value</th>
    <td>
      @for (friend of friendsForm.value.friends; track friend) {
        {{ friend.name }}
      }
    </td>
  </tr>
</table>

<div>
  <p class="lookup-single-controls">
    <button
      class="sky-btn sky-btn-default"
      id="btn-toggle-select-mode"
      type="button"
      [ngClass]="{ 'sky-btn-disabled': disabled }"
      (click)="toggleSelectMode()"
    >
      Toggle select mode
    </button>
    <button
      class="sky-btn sky-btn-default"
      id="btn-reset-value"
      type="button"
      [ngClass]="{ 'sky-btn-disabled': disabled }"
      (click)="onResetValueClick()"
    >
      Reset value
    </button>
    <button
      class="sky-btn sky-btn-default"
      id="btn-toggle-disabled"
      type="button"
      (click)="disabled = !disabled"
    >
      {{ disabled ? 'Enable' : 'Disable' }}
    </button>
    <sky-checkbox (change)="toggleCustomPicker()">
      <sky-checkbox-label> Enable Custom Picker </sky-checkbox-label>
    </sky-checkbox>
  </p>

  <div class="app-screenshot" id="lookup-single-visual">
    <form novalidate [formGroup]="bestFriendsForm">
      <sky-input-box
        class="sky-margin-stacked-lg"
        labelText="Who is your best friend?"
        [disabled]="disabled"
      >
        <sky-lookup
          formControlName="bestFriend"
          idProperty="id"
          placeholderText="Type a person's name..."
          [selectMode]="bestFriendSelectMode"
          [data]="people"
          [disabled]="disabled"
          [debounceTime]="1000"
          [enableShowMore]="true"
          [searchResultTemplate]="itemTemplate"
          [showAddButton]="true"
          [showMoreConfig]="showMoreConfig"
          (addClick)="addButtonClicked($event)"
        />
      </sky-input-box>
    </form>
  </div>

  <div class="app-screenshot" id="lookup-single-async-visual">
    <form novalidate [formGroup]="bestFriendsForm">
      <sky-input-box class="sky-margin-stacked-lg" [disabled]="disabled">
        <label class="sky-control-label">
          Who is your best friend? (async)</label
        >
        <sky-lookup
          formControlName="bestFriendAsync"
          idProperty="id"
          placeholderText="Type a person's name..."
          [selectMode]="bestFriendSelectMode"
          [disabled]="disabled"
          [debounceTime]="1000"
          [enableShowMore]="false"
          [searchResultTemplate]="itemTemplate"
          [showAddButton]="false"
          [showMoreConfig]="showMoreConfig"
          (searchAsync)="bestFriendSearch($event)"
          (addClick)="addButtonClicked($event)"
        />
      </sky-input-box>
    </form>
  </div>
</div>

<ng-template #itemTemplate let-item="item">
  <strong>{{ item.name }}</strong
  ><br />
  {{ item.id }}
</ng-template>
<ng-template #itemTemplate2 let-item="item">
  {{ item.name }}<br />
  {{ item.id }}
</ng-template>

<table id="single-mode-info">
  <tr>
    <th>Touched</th>
    <td>{{ bestFriendsForm.touched }}</td>
  </tr>
  <tr>
    <th>Pristine</th>
    <td>{{ bestFriendsForm.pristine }}</td>
  </tr>
  <tr>
    <th>Valid</th>
    <td>{{ bestFriendsForm.valid }}</td>
  </tr>
  <tr>
    <th>Value</th>
    <td>
      @for (friend of bestFriendsForm.value.bestFriend; track friend) {
        {{ friend.name }}
      }
    </td>
  </tr>
  <tr>
    <th>Value async</th>
    <td>
      @for (friend of bestFriendsForm.value.bestFriendAsync; track friend) {
        {{ friend.name }}
      }
    </td>
  </tr>
</table>
