<!--
~ 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.pageBackwards()">
    <ion-icon slot="icon-only" name="chevron_left"></ion-icon>
  </ion-button>
  <ion-button fill="clear" class="right-button" (click)="mainSwiper.pageForward()">
    <ion-icon slot="icon-only" name="chevron_right"></ion-icon>
  </ion-button>
  <infinite-swiper
    class="header-swiper"
    #headerSwiper
    [slidesPerView]="1"
    (indexChange)="onHeaderSwipe($event, mainSwiper)"
  >
    <ng-template let-index>
      @if (index | dateFromIndex: baselineDate; as date) {
        <div 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)="presentDatePopover(mainSwiper, headerSwiper, index, popoverDateTime)"
              >
              </ion-datetime>
            </ng-template>
          </ion-popover>
        </div>
      }
    </ng-template>
  </infinite-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 -->
      @for (i of hours; track i) {
        <div class="hour-lines" [style.marginTop.px]="i * scale + 45">{{ i + hoursRange.from }}</div>
      }
    </div>
    <div class="infinite-swiper-wrapper">
      <infinite-swiper
        #mainSwiper
        [slidesPerView]="layout.days"
        (indexChangeStart)="onPageChange($event)"
        class="full-height"
      >
        <ng-template let-index>
          <schedule-day
            [day]="index | dateFromIndex: baselineDate"
            [hoursRange]="hoursRange"
            [scale]="scale"
            [uuids]="uuids"
            [dateSeries]="testSchedule[index]"
            [layout]="layout"
            [isLeftmost]="dateRange.startDate === (index | dateFromIndex: baselineDate).format('DD.MM.YY')"
          >
          </schedule-day>
        </ng-template>
      </infinite-swiper>
    </div>
  </div>
</ion-content>
