<!--
  ~ Copyright (C) 2022 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/>.
  -->

<ion-item (click)="modified.emit(); selection.click()" class="list-header" lines="none">
  <ion-list-header>
    <ion-label>{{ 'data.chips.add_events.popover.ALL' | translate }}</ion-label>
  </ion-list-header>
  <ion-checkbox slot="end" [checked]="selection.checked" [indeterminate]="selection.indeterminate">
  </ion-checkbox>
</ion-item>
<ng-container *ngFor="let frequency of selection.children">
  <ion-list inset="true" lines="full">
    <ion-item lines="none" (click)="modified.emit(); frequency.click()" class="list-header">
      <ion-list-header>
        <ion-label>{{
          frequency.children[0].item.repeatFrequency
            ? (frequency.children[0].item.repeatFrequency | durationLocalized: true | sentencecase)
            : ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
        }}</ion-label>
        <ion-button></ion-button>
      </ion-list-header>
      <ion-checkbox slot="end" [checked]="frequency.checked" [indeterminate]="frequency.indeterminate">
      </ion-checkbox>
    </ion-item>
    <ion-item
      *ngFor="let date of frequency.children"
      (click)="modified.emit(); date.selected = !date.selected; frequency.notifyChildChanged()"
    >
      <ion-label *ngIf="date.item.dates.length > 1; else single_event" class="ion-text-wrap">
        {{ date.item.duration | amDuration: 'hours' }}
        {{ 'data.chips.add_events.popover.AT' | translate }}
        {{ date.item.dates[0] | amDateFormat: 'HH:mm ddd' }}
        {{ 'data.chips.add_events.popover.UNTIL' | translate }}
        {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll' }}
      </ion-label>
      <ng-template #single_event>
        <ion-label class="ion-text-wrap">
          {{ date.item.duration | amDuration: 'hours' }}
          {{ 'data.chips.add_events.popover.AT' | translate }}
          {{ date.item.dates[date.item.dates.length - 1] | amDateFormat: 'll, HH:mm' }}
        </ion-label>
      </ng-template>
      <ion-checkbox slot="end" [checked]="date.selected"> </ion-checkbox>
    </ion-item>
  </ion-list>
</ng-container>
