<ion-header no-border>
  <ion-toolbar translucent>
      <ion-buttons slot="start">
          <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
      <ion-buttons slot="primary">
          <ion-button>
            <ion-icon class="icon-header" slot="icon-only" src="assets/tab2/vista-diaria.svg"></ion-icon>
          </ion-button>
          <ion-button color="secondary">
            <ion-icon class="icon-header" slot="icon-only" name="refresh"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-buttons slot="primary">
          <ion-button color="secondary" (click)="presentPopover(ev)" >
            <ion-icon class="icon-header" slot="icon-only" name="more"></ion-icon>
          </ion-button>
        </ion-buttons>

    <ion-title></ion-title>
  </ion-toolbar>
</ion-header>

<ion-content fullscreen class="calendario">

  <ion-fab vertical="bottom" horizontal="end" slot="fixed">
    <ion-fab-button class="fab" href="/crear">
      <ion-icon name="add" color="primary" ></ion-icon>
    </ion-fab-button>
  </ion-fab>

    <!--crear evento-->
    <ion-card>
        <ion-card-header tappable (click)="collapseCard = !collapseCard">
          <ion-card-title>Nueva tarea</ion-card-title>
        </ion-card-header>
        <ion-card-content *ngIf="!collapseCard">

          <ion-item>
            <ion-input type="text" placeholder="Describe tu tarea" [(ngModel)]="event.title"></ion-input>
          </ion-item>
          <!--<ion-item>
            <ion-input type="text" placeholder="Description" [(ngModel)]="event.desc"></ion-input>
          </ion-item>>-->
          <ion-item>
            <ion-label>Hora de inicio</ion-label>
            <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.startTime" [min]="minDate"></ion-datetime>
          </ion-item>
          <ion-item>
            <ion-label>Hora final</ion-label>
            <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.endTime" [min]="minDate"></ion-datetime>
          </ion-item>
          <ion-item>
            <ion-label>Todo el día?</ion-label>
            <ion-checkbox [(ngModel)]="event.allDay"></ion-checkbox>
          </ion-item>
          <ion-button fill="outline" expand="block" (click)="addEvent()" [disabled]="event.title == ''">Add Event</ion-button>

        </ion-card-content>
      </ion-card>

      <ion-row>
          <!-- vistas del calentario -->
          <ion-col size="4">
            <ion-button expand="block" [color]="calendar.mode == 'month' ? 'primary' : 'secondary'" (click)="changeMode('month')">Mes</ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button expand="block" [color]="calendar.mode == 'week' ? 'primary' : 'secondary'" (click)="changeMode('week')">Semana</ion-button>
          </ion-col>
          <ion-col size="4">
            <ion-button expand="block" [color]="calendar.mode == 'day' ? 'primary' : 'secondary'" (click)="changeMode('day')">Dia</ion-button>
          </ion-col>

          <!-- Move back one screen of the slides -->
          <ion-col size="6" text-left>
            <ion-button fill="clear" (click)="back()">
              <ion-icon name="arrow-back" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>

          <!-- Move forward one screen of the slides -->
          <ion-col size="6" text-right>
            <ion-button fill="clear" (click)="next()">
              <ion-icon name="arrow-forward" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-col>
        </ion-row>

    <calendar
    [eventSource]="eventSource"
    [calendarMode]="calendar.mode"
    [currentDate]="calendar.currentDate"
    (onEventSelected)="onEventSelected($event)"
    (onTitleChanged)="onViewTitleChanged($event)"
    (onTimeSelected)="onTimeSelected($event)"
    startHour="0"
    endHour="24"
    step="60"
    startingDayWeek="1">
    </calendar>


</ion-content>

<ion-app>
  <!--<ion-router-outlet></ion-router-outlet>-->
  <ion-split-pane contentId="menu-calendar">
    <ion-menu side="end" contentId="menu-calendar">
        <ion-header>
          <ion-toolbar>
            <ion-title>Menu</ion-title>
          </ion-toolbar>
        </ion-header>
        <ion-content fullscreen class="calendario">
          <ion-list>
            <ion-menu-toggle auto-hide="false" *ngFor="let p of pages">
              <ion-item [routerDirection]="'root'" [routerLink]="[p.url]" [class.active-item]="selectedPath === p.url">
                <ion-icon slot="start" [name]="p.icon"></ion-icon>
                <ion-label>
                </ion-label>
              </ion-item>
            </ion-menu-toggle>
          </ion-list>
          <ion-card>
            <ion-card-header tappable (click)="collapseCard = !collapseCard">
              <ion-card-title>Nueva tarea</ion-card-title>
            </ion-card-header>
            <ion-card-content *ngIf="!collapseCard">
                <ion-item>
                    <ion-input type="text" placeholder="Describe tu tarea" [(ngModel)]="event.title"></ion-input>
                  </ion-item>
                  <ion-item>
                      <ion-label>Hora de inicio</ion-label>
                      <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.startTime" [min]="minDate"></ion-datetime>
                    </ion-item>
                    <ion-item>
                      <ion-label>Hora final</ion-label>
                      <ion-datetime displayFormat="MM/DD/YYYY HH:mm" pickerFormat="MMM D:HH:mm" [(ngModel)]="event.endTime" [min]="minDate"></ion-datetime>
                    </ion-item>
                    <ion-item>
                      <ion-label>Todo el día?</ion-label>
                      <ion-checkbox [(ngModel)]="event.allDay"></ion-checkbox>
                    </ion-item>
                    <ion-button fill="outline" expand="block" (click)="addEvent()" [disabled]="event.title == ''" >Add Event</ion-button>


            </ion-card-content>
          </ion-card>


        </ion-content>
    </ion-menu>
    <ion-router-outlet id="menu-calendar" main></ion-router-outlet>
  </ion-split-pane>

</ion-app>