<sky-repeater data-sky-id="repeater-demo">
  @for (item of items; track item) {
    <sky-repeater-item [itemName]="item.accessibilityLabel">
      @if (item.title) {
        <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"
                [attr.aria-label]="
                  'Action 1 for ' + (item.title ?? item.accessibilityLabel)
                "
                (click)="onActionClicked('Action 1')"
              >
                Action 1
              </button>
            </sky-dropdown-item>
            <sky-dropdown-item>
              <button
                type="button"
                [attr.aria-label]="
                  'Action 2 for ' + (item.title ?? item.accessibilityLabel)
                "
                (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>
