{{#if this.sortedItems}}
  <SortableGroupAccessible
    @models={{this.sortedItems}}
    tabindex="0"
    class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg"
    data-test-id='meal-list-wrapper'
    as |groupHasFocus selectedIndex groupActions|>
    <SortableGroup
      @onChange={{action this.reorderMeals}}
      as |group|>
      {{#each this.sortedItems as |meal index|}}
        <SortableItemAccessible
          @groupHasFocus={{groupHasFocus}}
          @currentIndex={{index}}
          @selectedIndex={{selectedIndex}}
          @orderItemDown={{groupActions.orderItemDown}}
          @orderItemUp={{groupActions.orderItemUp}}
          @handleBlur={{groupActions.handleBlur}}
          class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg">
          <SortableItem
            @model={{meal}}
            @group={{group}}
            data-test-id="meal-item">
            <MealItem
              @meal={{meal}}
              @handleFocus={{groupActions.handleFocus}}
              @handleBlur={{groupActions.handleBlur}}
            />
          </SortableItem>
        </SortableItemAccessible>
      {{/each}}
    </SortableGroup>
  </SortableGroupAccessible>
{{/if}}