<!--
  ~ 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 Licens 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 `calendar-view` -->
<div class="header">
  <ion-button
    fill="clear"
    class="left-button"
    (click)="mainSwiper.swiperRef.slidePrev()"
  >
    <ion-icon slot="icon-only" name="chevron-back-outline"></ion-icon>
  </ion-button>
  <ion-button
    fill="clear"
    class="right-button"
    (click)="mainSwiper.swiperRef.slideNext()"
  >
    <ion-icon slot="icon-only" name="chevron-forward-outline"></ion-icon>
  </ion-button>
  <ion-item>
    <swiper
      class="header-swiper"
      #headerSwiper
      [slidesPerView]="layout.days"
      (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
    >
      <ng-template swiperSlide *ngFor="let date of weekDates">
        <div class="day-labels">
          <ion-button expand="block" fill="clear" disabled>
            <ion-label>
              {{ date | amDateFormat: 'dddd' }}
            </ion-label>
          </ion-button>
        </div>
      </ng-template>
    </swiper>
  </ion-item>
</div>
<ion-content>
  <swiper
    #mainSwiper
    [slidesPerView]="layout.days"
    (indexChange)="onPageChange($event)"
    (activeIndexChange)="syncSwiper(mainSwiper, headerSwiper)"
    class="full-height"
  >
    <ng-template swiperSlide *ngFor="let day of weekDates; index as i">
      <schedule-day
        [day]="day"
        [hoursRange]="hoursRange"
        [scale]="scale"
        [uuids]="uuids"
        [dateSeries]="testSchedule[i]"
      >
      </schedule-day>
    </ng-template>
  </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>
