<!--
  ~ 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="header">
  <ion-button fill="clear" class="left-button" (click)="mainSwiper.swiperRef.slidePrev()">
    <ion-icon slot="icon-only" name="navigate_before"></ion-icon>
  </ion-button>
  <ion-button fill="clear" class="right-button" (click)="mainSwiper.swiperRef.slideNext()">
    <ion-icon slot="icon-only" name="navigate_next"></ion-icon>
  </ion-button>
  <swiper
    class="header-swiper"
    #headerSwiper
    [slidesPerView]="1"
    (activeIndexChange)="syncSwiper(headerSwiper, mainSwiper)"
  >
    <ng-template let-index>
      <div *ngIf="index | dateFromIndex : baselineDate as date" class="day-labels">
        <ion-button expand="block" fill="clear" [id]="'date-select-button' + index">
          {{ dateRange.startDate }} - {{ dateRange.endDate }}
        </ion-button>

        <ion-popover [trigger]="'date-select-button' + index">
          <ng-template>
            <ion-datetime
              #popoverDateTime
              presentation="date"
              [value]="date | amDateFormat : 'YYYY-MM-DD'"
              (ionChange)="presentScheduleDatePopover(index, popoverDateTime)"
            >
            </ion-datetime>
          </ng-template>
        </ion-popover>
      </div>
    </ng-template>
  </swiper>
</div>

<ion-content #content>
  <div class="schedule-wrapper" [style.height.px]="scale * (hoursRange.to - hoursRange.from + 1) + scale">
    <div class="hours-wrapper">
      <!-- add margin top +45 to start below the date header -->
      <div class="hour-lines" *ngFor="let i of hours" [style.marginTop.px]="i * scale + 45">
        {{ i + hoursRange.from }}
      </div>
    </div>
    <div class="infinite-swiper-wrapper">
      <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]"
            [layout]="layout"
            [isLeftmost]="dateRange.startDate === (i | dateFromIndex : baselineDate).format('DD.MM.YY')"
          >
          </schedule-day>
        </ng-template>
      </swiper>
    </div>
  </div>
</ion-content>
