<div class="content">
  <div class="group-content icon" *ngIf="calendarExceptionList.length === 0 && mode === 'view'">
    <div class="row icon1">
      <div class="form-group col-xl-12">
        <i class="fa fa-times-circle fa-5x"></i>
      </div>
    </div>

    <div class="row">
      <div class="form-group col-xl-12">
        <h3 class="suggest"> {{ 'title.calendar.exception.grid.information' | translate}}</h3>
      </div>
    </div>

  </div>
  <div class="group-content button-new icon" *ngIf="calendarExceptionList.length === 0 && mode !== 'view'">
    <button type="button" mat-stroked-button class="btn btn-success icon1" (click)="onNewRecord()"
      matTooltip="{{ 'btn.new' | translate }}">
      <i aria-hidden="true" class="fa fa-file-o" color="white"></i>
      <span>{{ 'calendar_exception.btn.add' | translate }}</span>
    </button>
    <div class="row suggest">
      <div class="form-group col-xl-12">
        <h3> {{ 'title.calendar.exception.grid.information' | translate}}</h3>
      </div>
    </div>
  </div>
</div>
<div class="style-all">
  <div class="row">
    <div class="col-12">
      <div class=" grid" *ngIf="calendarExceptionList.length > 0">
        <byte-calendar-exception-table #calendarException [columnTemplateArray]="columnTemplateArray"
          [definitionReport]="template.definitionReport" [sortColumn]="sortColumn" [sortDirection]="sortDirection"
          [mode]="mode" [calendarId]="calendarID" [calendarExceptionGrid]="calendarExceptionGrid"
          [calendarExceptionList]="calendarExceptionList" (dirtyChange)="dirtyChangeForm()">
        </byte-calendar-exception-table>
      </div>
    </div>
  </div>
</div>