<app-breadcrumb [path]="routes.CALENDAR"></app-breadcrumb>

<div class="content-wrapper">
  <div class="external-event-wrapper" #externalEvents>
    <h3 class="title">Draggable Events</h3>
    <p class="subtitle">Just drap and drop events from there directly into the calendar.</p>

    <mat-card appearance="outlined" class="external-event" data-event-class="bg-success">
      <mat-card-content class="external-event-content">
        <div class="circle green"></div>
        <p>Make a tea</p>
      </mat-card-content>
    </mat-card>

    <mat-card appearance="outlined" class='external-event' data-event-class="bg-warn">
      <mat-card-content class="external-event-content">
        <div class="circle yellow"></div>
        <p>Open windows</p>
      </mat-card-content>
    </mat-card>

    <mat-card appearance="outlined" class='external-event' data-event-class="bg-primary">
      <mat-card-content class="external-event-content">
        <div class="circle violet"></div>
        <p>Some stuff</p>
      </mat-card-content>
    </mat-card>
  </div>

  <mat-card appearance="outlined" class="calendar-wrapper">
    <div class="tools-panel-wrapper">
      <div class="tools-panel">
        <button (click)="prev()" color="default" class="tool-circle-button" mat-mini-fab><mat-icon class="icon">keyboard_arrow_left</mat-icon></button>
        <button (click)="next()" color="default" class="tool-circle-button" mat-mini-fab><mat-icon class="icon">keyboard_arrow_right</mat-icon></button>
        <button (click)="today()" class="tool-button" mat-flat-button>today</button>
      </div>


      <div class="tools-panel">
        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.month}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.month)">month</button>
        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.weeks}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.weeks)">week</button>
        <button class="tool-button" [ngClass]="{'active': calendarView === calendarViewTypes.days}" mat-flat-button (click)="changeCalendarView(calendarViewTypes.days)">day</button>
      </div>
    </div>
    <full-calendar
      #calendar
      [options]="calendarOptions"
      [events]="events"
    ></full-calendar>
  </mat-card>
</div>
