<div class="sky-padding-even-xl">
  <div class="sky-margin-stacked-xl">
    <button
      type="button"
      class="sky-btn sky-btn-primary selection-modal-demo-show-btn"
      (click)="showSelectionModal()"
    >
      Select a value
    </button>
  </div>
  <div class="sky-margin-stacked-xl">
    <button
      type="button"
      class="sky-btn sky-btn-primary selection-modal-demo-show-btn"
      (click)="showSelectionModal(false)"
    >
      Select multiple values
    </button>
  </div>

  @if (selectedPeople?.length) {
    <div>
      Selected people:
      <ul class="selection-modal-demo-selected">
        @for (selectedPerson of selectedPeople; track selectedPerson) {
          <li>
            {{ selectedPerson.name }}
          </li>
        }
      </ul>
    </div>
  }
</div>
