<c8y-modal
  [title]="'Create new report with widget' | translate"
  [headerClasses]="'dialog-header'"
  [disabled]="reportName === ''"
  (onDismiss)="cancel()"
  (onClose)="save()"
  [labels]="labels"
>
  <ng-container c8y-modal-title>
    <span c8yIcon="c8y-reports"></span>
  </ng-container>

  <p class="text-center bg-component text-balance sticky-top p-l-24 p-r-24 p-t-8 p-b-8 separator-bottom">
   {{' Create a new report with the Data points graph widget using the current configuration.' | translate}}
  </p>
  <div class="p-24 p-t-8">
    <c8y-form-group>
      <label
        for="reportName"
        translate
        >
        Report name
      </label>
      <input
        class="form-control"
        id="reportName"
        placeholder="{{ 'e.g. My data point Report' }}"
        name="name"
        type="text"
        autocomplete="off"
        required
        [(ngModel)]="reportName"
      />
      <c8y-messages></c8y-messages>
    </c8y-form-group>
  </div>
</c8y-modal>