<!--
~ 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/>.
-->

<div class="stack-children">
  @if (associatedDateSeries | async; as associatedDateSeries) {
    <ion-chip
      @chipTransition
      [disabled]="disabled"
      (click)="$event.stopPropagation(); editModal.present()"
      [color]="color"
      [outline]="true"
    >
      <ion-icon [name]="icon" [fill]="iconFill"></ion-icon>
      <ion-label>{{ label | translate }}</ion-label>
      <stapps-edit-modal #editModal (save)="selection.save()">
        <ng-template>
          <ion-content parallax [parallaxSize]="160" class="ion-padding modal-content">
            <stapps-edit-event-selection
              #selection
              [items]="associatedDateSeries"
              (modified)="editModal.pendingChanges = true"
            ></stapps-edit-event-selection>
          </ion-content>
          <ion-footer mode="ios">
            <ion-toolbar color="light">
              <ion-button
                slot="end"
                fill="clear"
                (click)="export()"
                [disabled]="!(selection.selection.indeterminate || selection.selection.checked)"
              >
                {{ 'schedule.toCalendar.reviewModal.DOWNLOAD' | translate | titlecase }}
                <ion-icon slot="end" name="download"></ion-icon>
              </ion-button>
            </ion-toolbar>
          </ion-footer>
        </ng-template>
      </stapps-edit-modal>
    </ion-chip>
  } @else {
    <ion-chip @chipSkeletonTransition>
      <ion-skeleton-text animated="true"></ion-skeleton-text>
    </ion-chip>
  }
</div>
