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

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
      <ion-menu-button></ion-menu-button>
    </ion-buttons>

    <ion-segment #segment value="calendar" (ionChange)="onSegmentChange()">
      <ion-segment-button value="calendar">
        <ion-label>{{ 'schedule.calendar' | translate }}</ion-label>
      </ion-segment-button>
      <ion-segment-button value="recurring">
        <ion-label>{{ 'schedule.recurring' | translate }}</ion-label>
      </ion-segment-button>
      <ion-segment-button value="single">
        <ion-label>{{ 'schedule.single' | translate }}</ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>

<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
  *ngIf="fabVisible"
  @fabAnimation
  vertical="bottom"
  horizontal="end"
  slot="fixed"
>
  <ion-fab-button (click)="showCreateEventModal()">
    <ion-icon name="add"></ion-icon>
  </ion-fab-button>
</ion-fab>
