<sky-repeater style="width: 100%">
  @for (item of repeaterDemoItems; track item) {
    <sky-repeater-item>
      <sky-repeater-item-context-menu>
        <sky-dropdown buttonType="context-menu">
          <sky-dropdown-menu>
            <sky-dropdown-item>
              <button type="button" (click)="showInlineDelete(item.title)">
                Delete
              </button>
            </sky-dropdown-item>
          </sky-dropdown-menu>
        </sky-dropdown>
      </sky-repeater-item-context-menu>
      <sky-repeater-item-title class="sky-demo-inline-delete-flex">
        <div>
          {{ item.title }}
        </div>
        <div>
          {{ item.cost }}
        </div>
      </sky-repeater-item-title>
      <sky-repeater-item-content>
        {{ item.description }}
      </sky-repeater-item-content>
      @if (repeaterDemoShownInlineDeletes.indexOf(item.title) >= 0) {
        <sky-inline-delete
          (cancelTriggered)="cancelDeletion(item.title)"
          (deleteTriggered)="deleteItem(item.title)"
        />
      }
    </sky-repeater-item>
  }
</sky-repeater>

<button class="sky-btn sky-btn-primary" type="button" (click)="onResetClick()">
  Reset Repeater
</button>
