<div class="fs-datetime-backdrop" [hidden]="!parentInstance.opened" (click)="close($event)"></div>

<div class="fs-datetime-dialog {{ 'dialog-view-' + fsDatePickerModel.view }}" tabindex="0"
[ngClass]="{ opened: parentInstance.opened,
  'has-date': fsDatePickerModel.components.calendarStart,
  'has-time': fsDatePickerModel.components.timeStart,
  'date-mode-date': fsDatePickerModel.dateMode === 'date',
  'date-mode-month': fsDatePickerModel.dateMode === 'month',
  'date-mode-year': fsDatePickerModel.dateMode === 'year'
 }">
  <div class="wrap">

    <div *ngIf="fsDatePickerModel.dateMode === 'date'" class="header">
      <fsDatePickerSummary
      [startDate]="model"
      (componentsChange)="setComponents($event)"
      ></fsDatePickerSummary>

      <fsDatePickerPresets
      *ngIf="!fsDatePickerModel.components.timeStart"
      (datesChange)="setDate($event)"
      ></fsDatePickerPresets>
    </div>

    <div class="date-time">
      <fsDatePickerCalendar
        *ngIf="fsDatePickerModel.components.calendarStart"
        [date]="model"
        [drawMonth]="calendarMonth"
        [dateMode]="fsDatePickerModel.dateMode"
        (onChange)="setDate($event)"
        (onDateModeChange)="setDateMode($event)"
        (onDrawMonth)="calendarDrawMonth($event)"
      ></fsDatePickerCalendar>

      <fsDatePickerTime
        *ngIf="fsDatePickerModel.components.timeStart"
        [date]="model"
        (onChange)="setDate($event)"
      ></fsDatePickerTime>

    </div>

    <!-- Done button showing on Time Picker or Date Time picker on calendar mode -->
    <div class="done"
    *ngIf="fsDatePickerModel.view === 'time' ||
          (fsDatePickerModel.view === 'datetime' && fsDatePickerModel.dateMode === 'date')">
      <button type="button" mat-raised-button color="primary" (click)="close($event)">Done</button>
    </div>
  </div>
</div>