<div [ngClass]="{ main_calendar_view_flex: !btnSmall, main_calendar_view_relative: btnSmall }" 
class="main_calendar_view animated fadeIn" (window:resize)="onResize()">
  <div [ngClass]="{ calendar_panel_left_flex: !btnSmall, calendar_panel_left_floating: btnSmall, animate_close: animateClose, hidden: !showLeftPanel, 
  animate_open: animateOpen }" class="white_background calendar_panel_left">
    <div id="navigation" class="m-16">
      <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8 animated fadeIn" [routerLink]="['/sam/GMPR']" matRipple>
        <mat-icon style="color: white;">arrow_back</mat-icon>
        <div class="page-name ml-4">{{ btnSmall ? 'Regresar' : 'Gestión de mantenimiento preventivo' }}</div>
      </div>
      <div class="flex-expanded-width" *ngIf="btnSmall"></div>
      <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8 animated fadeIn" *ngIf="btnSmall" (click)="closeLeftPanel()">
        <mat-icon style="color: white;">menu</mat-icon>
      </div>
    </div>
    <div class="date-picker-calendar">
      <mat-calendar [(selected)]="selected" (selectedChange)="checkMonth($event)"></mat-calendar>
    </div>
    <div class="registered-jobs" [formGroup]="orderTypes">
      <h4 style="font-weight: 500;">Tipo de orden</h4>
      <p><mat-checkbox color="primary" formControlName="unica">Única</mat-checkbox></p>
      <p><mat-checkbox color="primary" formControlName="periodica">Periódica</mat-checkbox></p>
    </div>
  </div>
  <div [ngClass]="{ main_calendar_container_flex: !btnSmall, main_calendar_container_relative: btnSmall  }" class="main_calendar_container prevent-select">
    <div class="calendar_header">
      <div class="prev-page prevent-select indigo_primary_background mat-elevation-z8 animated fadeIn mr-16" *ngIf="btnSmall" (click)="openLeftPanel()">
        <mat-icon style="color: white;">menu</mat-icon>
      </div>
      <button mat-stroked-button class="mr-32" (click)="changeMonth('today')">
        Hoy
      </button>
      <button mat-icon-button (click)="changeMonth('sub')">
        <mat-icon>chevron_left</mat-icon>
      </button>
      <button mat-icon-button class="mr-16" (click)="changeMonth('add')">
        <mat-icon>chevron_right</mat-icon>
      </button>
      <p class="calendar_title">{{ calendarTitle }}</p>
    </div>
    <div class="calendar_days">
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Domingo</div>
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Lunes</div>
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Martes</div>
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Miércoles</div>
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Jueves</div>
      <div class="calendar_day calendar_cell_border_right calendar_cell_border_bottom">Viernes</div>
      <div class="calendar_day calendar_cell_border_bottom">Sábado</div>
    </div>
    <div class="month_days_table">
      <div class="month_days_row" *ngFor="let row of monthDays;let i = index" [ngClass]="{ calendar_cell_border_bottom: i < monthDays.length - 1 }">
        <div class="month_days_cell" *ngFor="let day of monthDays[i];let j = index" [ngClass]="{ calendar_cell_border_right: j < monthDays[i].length - 1 }" 
        (click)="openDayEvents(day)">
          <div class="month_day_label">
            <div class="month_day" [ngClass]="{ gray_light_font: !day.isActualMonth, actual_day: day.isActualDay }">{{ day.day }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>