<!--
  ~ 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/>.
  -->
<!-- TODO: modularize duplicate stuff with `schedule-view` -->
<div class="header">
  <ion-button
    fill="clear"
    class="left-button"
    (click)="mainSwiper.pageBackwards()"
  >
    <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
  </ion-button>
  <ion-button
    fill="clear"
    class="right-button"
    (click)="mainSwiper.pageForward()"
  >
    <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
  </ion-button>
  <ion-item>
    <infinite-swiper
      class="header-swiper"
      #headerSwiper
      [slidesPerView]="layout.days"
      [controller]="mainSwiper"
    >
      <ng-template let-index>
        <div
          *ngIf="index | dateFromIndex: baselineDate as date"
          class="day-labels"
        >
          <ion-button expand="block" fill="clear" (click)="datetime.open()">
            <ion-label>
              {{
                date
                  | amDateFormat: ((date | dateIsThis: 'week') ? 'dddd' : 'll')
              }}
            </ion-label>
          </ion-button>

          <!-- This poor datetime element is a phantom element to provide us with a date picker -->
          <ion-datetime
            class="phantom"
            #datetime
            [displayFormat]="localDateFormat"
            [value]="date.toISOString()"
            (ionChange)="
              mainSwiper.goToIndex(
                moment($event.detail.value).diff(baselineDate, 'days')
              )
            "
          >
          </ion-datetime>
        </div>
      </ng-template>
    </infinite-swiper>
  </ion-item>
</div>
<ion-content>
  <infinite-swiper
    #mainSwiper
    [controller]="headerSwiper"
    [slidesPerView]="layout.days"
    (indexChange)="onPageChange($event)"
  >
    <ng-template let-index>
      <schedule-day
        [day]="index | dateFromIndex: baselineDate"
        [hoursRange]="hoursRange"
        [scale]="scale"
        [uuids]="uuids"
        [dateSeries]="testSchedule[index]"
      >
      </schedule-day>
    </ng-template>
  </infinite-swiper>
  <div
    class="hour-lines"
    *ngFor="let i of hours"
    [style.marginTop.px]="i * scale"
  >
    <ion-label>{{ i + hoursRange.from }}:00</ion-label>
    <hr class="horizontal-line" />
  </div>
</ion-content>
