<SortableGroupAccessible
  @models={{this.sortedItems}} as |groupHasFocus selectedIndex orderItemDown orderItemUp|>
  <SortableGroup
    @onChange={{action this.reorderMeals}}
    as |group|>
    {{#each this.sortedItems as |meal index|}}
      <SortableItemAccessible
        @groupHasFocus={{groupHasFocus}}
        @currentIndex={{index}}
        @selectedIndex={{selectedIndex}}
        @orderItemDown={{orderItemDown}}
        @orderItemUp={{orderItemUp}}>
        <SortableItem
          @model={{meal}}
          @group={{group}}
          data-test-id="meal-item">
          <MealItem @meal={{meal}} {{on "click" this.openMealDetails}} />
        </SortableItem>
      </SortableItemAccessible>
    {{/each}}
  </SortableGroup>
</SortableGroupAccessible>
