<ng-container>
  <div *ngIf="dishes | async as dishes; else loading">
    <ion-segment [(ngModel)]="selectedDay" mode="md">
      <ion-segment-button
        *ngFor="let day of dishes | keyvalue"
        [value]="day.key"
      >
        <ion-label class="ion-hide-sm-down">{{
          day.key | dateFormat: 'weekday:long,month:numeric,day:numeric'
        }}</ion-label>
        <ion-label class="ion-hide-sm-up">{{
          day.key | dateFormat: 'weekday:short,month:numeric,day:numeric'
        }}</ion-label>
      </ion-segment-button>
    </ion-segment>
    <div [ngSwitch]="selectedDay">
      <div *ngFor="let date of dishes | keyvalue">
        <ion-list *ngSwitchCase="date.key">
          <stapps-data-list-item
            [item]="dish"
            *ngFor="let dish of date.value"
          ></stapps-data-list-item>
        </ion-list>
      </div>
    </div>
  </div>
  <ng-template #loading>
    <ion-segment>
      <stapps-skeleton-segment-button
        *ngFor="let skeleton of [1, 2, 3]"
      ></stapps-skeleton-segment-button>
    </ion-segment>
    <ion-list>
      <stapps-skeleton-list-item
        *ngFor="let skeleton of [1, 2]"
      ></stapps-skeleton-list-item>
    </ion-list>
  </ng-template>
</ng-container>
