<div class="sky-margin-stacked-lg">
  <sky-repeater
    data-sky-id="repeater-demo"
    [expandMode]="'single'"
    [reorderable]="true"
    (orderChange)="changeItems($event)"
  >
    @for (item of items; track item) {
      <sky-repeater-item
        [selectable]="true"
        [tag]="item.note"
        [(isSelected)]="item.isSelected"
      >
        <sky-repeater-item-title class="demo-repeater-flex">
          <div class="demo-repeater-item-title sky-font-emphasized">
            {{ item.title }}
          </div>
          <div>
            {{ item.status }}
          </div>
        </sky-repeater-item-title>
        <sky-repeater-item-context-menu>
          <sky-dropdown buttonType="context-menu">
            <sky-dropdown-menu>
              <sky-dropdown-item>
                <button type="button" (click)="onActionClicked('Action 1')">
                  Action 1
                </button>
              </sky-dropdown-item>
              <sky-dropdown-item>
                <button type="button" (click)="onActionClicked('Action 2')">
                  Action 2
                </button>
              </sky-dropdown-item>
            </sky-dropdown-menu>
          </sky-dropdown>
        </sky-repeater-item-context-menu>
        <sky-repeater-item-content>
          {{ item.note }}
        </sky-repeater-item-content>
      </sky-repeater-item>
    }
  </sky-repeater>
</div>

<button
  data-sky-id="add-button"
  class="sky-btn sky-btn-default sky-margin-inline-sm"
  type="button"
  (click)="addItem()"
>
  Add item
</button>

<button
  data-sky-id="remove-button"
  class="sky-btn sky-btn-default sky-margin-inline-sm"
  type="button"
  (click)="removeItems()"
>
  Remove selected items
</button>
