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

<ion-header>
  <ion-toolbar color="primary" mode="ios">
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title *ngIf="tabChoreographer.currentValue === 'calendar'"
      >{{ 'schedule.calendar' | translate | titlecase }}</ion-title
    >
    <ion-title *ngIf="tabChoreographer.currentValue === 'recurring'"
      >{{ 'schedule.recurring' | translate | titlecase }}</ion-title
    >
    <ion-title *ngIf="tabChoreographer.currentValue === 'single'"
      >{{ 'schedule.single' | translate | titlecase }}</ion-title
    >
    <ion-buttons slot="end">
      <ion-button (click)="onTodayClick()">
        <ion-icon name="today" slot="icon-only"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
  <ion-toolbar color="primary" mode="md" class="tabs-toolbar">
    <ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
      <ion-segment-button value="calendar" layout="icon-start">
        <ion-label>{{ 'schedule.calendar' | translate }}</ion-label>
        <ion-icon name="calendar_today"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="recurring" layout="icon-start">
        <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
        <ion-icon name="event_repeat"></ion-icon>
      </ion-segment-button>
      <ion-segment-button value="single" layout="icon-start">
        <ion-label>{{ 'schedule.single' | translate }}</ion-label>
        <ion-icon name="event_upcoming"></ion-icon>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<ion-content scroll-y="false">
  <div
    [ngSwitch]="tabChoreographer.currentValue"
    [@materialSharedAxisX]="tabChoreographer.animationState"
    (@materialSharedAxisX.done)="tabChoreographer.animationDone()"
  >
    <stapps-calendar-view *ngSwitchCase="'calendar'" [layout]="layout"></stapps-calendar-view>
    <!-- Schedule view needs full week -->
    <stapps-schedule-view *ngSwitchCase="'recurring'" [layout]="layout"></stapps-schedule-view>
    <stapps-single-events *ngSwitchCase="'single'"></stapps-single-events>
  </div>

  <ion-fab
    vertical="bottom"
    horizontal="end"
    slot="fixed"
    [routerLink]="['./event-picker']"
    [routerAnimation]="fabAnimation"
  >
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>
</ion-content>
