<ion-list lines="none" inset="false">
  @for (period of periods; track period) {
    <ion-item mode="md" [class.active]="service.periodString === period"
      (click)="setPeriod(period)" class="ion-text-center" lines="none" button>
      @switch (period) {
        @case (DefaultTypes.PeriodString.DAY) {
          <ion-label>
            {{"EDGE.HISTORY.DAY" | translate}}
          </ion-label>
        }
        @case (DefaultTypes.PeriodString.WEEK) {
          <ion-label>
            {{"EDGE.HISTORY.WEEK" | translate}}
          </ion-label>
        }
        @case (DefaultTypes.PeriodString.MONTH) {
          <ion-label>
            {{"EDGE.HISTORY.MONTH" | translate}}
          </ion-label>
        }
        @case (DefaultTypes.PeriodString.YEAR) {
          <ion-label>
            {{"EDGE.HISTORY.YEAR" | translate}}
          </ion-label>
        }
        @case (DefaultTypes.PeriodString.TOTAL) {
          <ion-label>
            {{"EDGE.HISTORY.TOTAL" | translate}}
          </ion-label>
        }
      }
    </ion-item>
  }
  <ion-item mode="md" [class.active]="service.periodString === DefaultTypes.PeriodString.CUSTOM"
    (click)="showCustomDate = !showCustomDate; setPeriod(DefaultTypes.PeriodString.CUSTOM)" class="ion-text-center"
    lines="none" button testId="popover-button">
    <ion-label>
      {{"EDGE.HISTORY.OTHER_PERIOD" | translate}}
    </ion-label>
  </ion-item>
</ion-list>
@if (showCustomDate) {
  <input (dateChanged)="onDateChanged($event.dateRange)" type="hidden" [locale]="locale"
    angular-mydatepicker name="mydate" [options]="myDpOptions" />
}
