<!--
  ~ Copyright (C) 2021 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-card-content>
  <ion-item-group>
    <ion-item-divider (click)="selection.click()">
      <ion-label>{{
        'data.chips.add_events.popover.ALL' | translate
      }}</ion-label>
      <ion-checkbox
        slot="start"
        [checked]="selection.checked"
        [indeterminate]="selection.indeterminate"
      >
      </ion-checkbox>
    </ion-item-divider>
    <ion-item-group *ngFor="let frequency of selection.children">
      <ion-item-divider (click)="frequency.click()">
        <ion-label class="ion-text-wrap">{{
          frequency.children[0].item.repeatFrequency
            ? (frequency.children[0].item.repeatFrequency
              | durationLocalized: true
              | sentencecase)
            : ('data.chips.add_events.popover.SINGLE' | translate | titlecase)
        }}</ion-label>
        <ion-checkbox
          slot="start"
          [checked]="frequency.checked"
          [indeterminate]="frequency.indeterminate"
        >
        </ion-checkbox>
      </ion-item-divider>
      <ion-item
        *ngFor="let date of frequency.children"
        (click)="date.selected = !date.selected; frequency.notifyChildChanged()"
      >
        <ion-label
          class="ion-text-wrap"
          *ngIf="date.item.dates.length > 1; else single_event"
        >
          {{ 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 }}
          {{ last(date.item.dates) | 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 }}
            {{ last(date.item.dates) | amDateFormat: 'll, HH:mm' }}
          </ion-label>
        </ng-template>
        <ion-checkbox slot="start" [checked]="date.selected"> </ion-checkbox>
      </ion-item>
    </ion-item-group>
  </ion-item-group>
  <div class="action-buttons">
    <ion-button (click)="onCommit(false)" fill="clear">{{
      'abort' | translate
    }}</ion-button>
    <ion-button (click)="onCommit(true)" fill="clear">{{
      'ok' | translate
    }}</ion-button>
  </div>
  <div class="download-button">
    <ion-button
      fill="clear"
      (click)="export()"
      [disabled]="!(selection.indeterminate || selection.checked)"
    >
      <ion-icon slot="icon-only" name="download"></ion-icon>
      <!-- {{ 'export' | translate }} -->
    </ion-button>
  </div>
</ion-card-content>
