<!--
  ~ Copyright (C) 2023 StApps
  ~ This program is free software: you can redistribute it and/or modify it
  ~ under the terms of the GNU General Public License as published by the Free
  ~ Software Foundation, version 3.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT
  ~ ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
  ~ FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
  ~ more details.
  ~
  ~ You should have received a copy of the GNU General Public License along with
  ~ this program. If not, see <https://www.gnu.org/licenses/>.
  -->

<ng-container>
  <ng-container *ngIf="dishes | async as dishes; else loading">
    <ng-container *ngIf="(dishes | json) !== '{}'; else empty">
      <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>
      <ng-container [ngSwitch]="selectedDay">
        <ng-container *ngFor="let date of dishes | keyvalue">
          <ng-container *ngIf="(date.value | json) !== '{}'; else empty">
            <ion-list *ngSwitchCase="date.key">
              <ng-container *ngFor="let section of date.value | keyvalue">
                <ion-list-header *ngIf="section.value[0].menuSection" lines="inset">
                  <ion-label class="title">
                    {{
                      'data.types.dish.detail.' + section.value[0].menuSection.name | translate | titlecase
                    }}
                    {{ section.value[0].menuSection.servingHours }}
                  </ion-label>
                </ion-list-header>
                <ng-container *ngFor="let dish of section.value; index as j">
                  <stapps-data-list-item [item]="dish" [hideThumbnail]="true"></stapps-data-list-item>
                </ng-container>
              </ng-container>
            </ion-list>
          </ng-container>
        </ng-container>
      </ng-container>
    </ng-container>
  </ng-container>
  <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-template #empty>
    <ion-card>
      <ion-card-header>
        <ion-label class="title"> {{ 'data.types.dish.EMPTY_DISHES' | translate }} </ion-label>
      </ion-card-header>
    </ion-card>
  </ng-template>
</ng-container>
