<h2 mat-dialog-title>{{ isEditMode ? ('editCalendar' | translate) : ('addCalendar' | translate) }}</h2>
<mat-dialog-content class="form-container">
  <mat-slide-toggle [(ngModel)]="isRemoteAvailable" class="example-margin">
    {{ 'remoteAvailability' | translate }}
  </mat-slide-toggle>

  <div *ngIf="!isRemoteAvailable" class="form-group">
    <mat-label>{{ 'selectWeekDays' | translate }}</mat-label>
    <div class="row">
      <div class="col-md-6 checkbox-group">
        <mat-checkbox *ngFor="let day of weekDays.slice(0, (weekDays.length / 2) + 1)" [(ngModel)]="busyWeekDays[day]">
          {{ day }}
        </mat-checkbox>
      </div>
      <div class="col-md-6 checkbox-group">
        <mat-checkbox *ngFor="let day of weekDays.slice(weekDays.length / 2 + 1)" [(ngModel)]="busyWeekDays[day]">
          {{ day }}
        </mat-checkbox>
      </div>
    </div>

    <div class="time-fields">
      <mat-form-field appearance="fill" class="time-field">
        <mat-label>{{ 'startTime' | translate }}</mat-label>
        <input matInput [(ngModel)]="busyFromHour" type="time" placeholder="{{ 'startTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
      </mat-form-field>

      <mat-form-field appearance="fill" class="time-field">
        <mat-label>{{ 'endTime' | translate }}</mat-label>
        <input matInput [(ngModel)]="busyToHour" type="time" placeholder="{{ 'endTimePlaceholder' | translate }}" [required]="!isRemoteAvailable">
      </mat-form-field>
    </div>
  </div>

  <div *ngIf="isRemoteAvailable" class="form-group">
    <mat-form-field appearance="fill" class="full-width">
      <mat-label>{{ 'reasonLabel' | translate }}</mat-label>
      <input matInput [(ngModel)]="availableReason" placeholder="{{ 'reasonPlaceholder' | translate }}" [required]="isRemoteAvailable">
    </mat-form-field>
    <div class="time-fields">
      <mat-form-field appearance="fill" class="full-width">
        <mat-label>{{ 'startDate' | translate }}</mat-label>
        <input matInput [matDatepicker]="picker1" [(ngModel)]="availableFromDate" [required]="isRemoteAvailable">
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker>
      </mat-form-field>
      <mat-form-field appearance="fill" class="full-width">
        <mat-label>{{ 'endDate' | translate }}</mat-label>
        <input matInput [matDatepicker]="picker2" [(ngModel)]="availableToDate" [required]="isRemoteAvailable">
        <mat-hint>MM/DD/YYYY</mat-hint>
        <mat-datepicker-toggle matIconSuffix [for]="picker2"></mat-datepicker-toggle>
        <mat-datepicker #picker2></mat-datepicker>
      </mat-form-field>
    </div>
  </div>
</mat-dialog-content>

<mat-dialog-actions class="action-container">
  <button class="ordinary-button" (click)="onNoClick()">{{ 'buttonCancel' | translate }}</button>
  <button
    class="submit-button"
    (click)="submitRule()"
    cdkFocusInitial
    [disabled]="(!isRemoteAvailable && (!busyFromHour || !busyToHour)) || (isRemoteAvailable && (!availableReason || !availableFromDate || !availableToDate))">
    {{ isEditMode ? ('buttonSave' | translate) : ('buttonAdd' | translate) }}
  </button>
</mat-dialog-actions>
