<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i c8yIcon="c8y-energy"></i>
    <h4 id="modal-title">{{ modalTitle | translate }}</h4>
  </div>
  <div class="modal-inner-scroll" id="modal-body">
    <div class="modal-body">
      <div class="text-center">
        <c8y-operation-summary
          [description]="bulkOperation.operationPrototype.description"
        ></c8y-operation-summary>
      </div>
      <div class="p-t-16 center-block" style="max-width: 300px">
        <c8y-operation-scheduler
          [(ngModel)]="dateAndDelay"
          #scheduler="ngModel"
        ></c8y-operation-scheduler>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button
      (click)="onCancel()"
      type="button"
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      c8yProductExperience
      [actionName]="BULK_OPERATION_EVENT"
      [actionData]="{ title: modalTitle, result: 'Cancel' }"
    >
      <span translate>Cancel</span>
    </button>
    <button
      id="save-btn"
      (click)="onSave()"
      type="button"
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      [disabled]="scheduler?.control?.errors"
      c8yProductExperience
      [actionName]="BULK_OPERATION_EVENT"
      [actionData]="{ title: modalTitle, result: 'Save' }"
    >
      <span translate>Save</span>
    </button>
  </div>
</div>