<div class="card-block">
<div
  class="d-flex d-col"
  [ngStyle]="{ height: '410px' }"
>
  <ng-container *ngIf="!isExporting && !isImporting; else loading">
    <div class="d-flex gap-16 flex-grow min-height-0">
      <div class="d-col col-md-8 col-xs-6">
        <label class="d-flex a-i-center">{{ 'Dashboard configuration' | translate }} 
          <button 
            type="button"
            [attr.aria-label]="'Help' | translate"
            class="btn-help " 
            placement="right"
            triggers="focus"
            containerClass="text-pre-wrap"
            [popover]="infoText | translate"
          ></button>
        </label>
        <c8y-editor
          class="flex-grow min-height-0"
          [ngModel]="valueString"
          (ngModelChange)="dashboardJSONChange($event)"
          (editorInit)="assignSchema()"
          [theme]="editorTheme"
          monacoEditorMarkerValidator
          [editorOptions]="editorOptions"
        ></c8y-editor>
      </div>
      <div class="col-md-4 d-col col-xs-6">
        <label translate>Validation</label>
        <div
          class="c8y-messages has-error m-b-24 inner-scroll flex-grow"
          *ngIf="errors().length > 0"
        >
          <div
            class="form-control-feedback-message"
            *ngFor="let error of errors()"
          >
            <span
              class="error-path"
              *ngIf="error.path"
            >
              {{ error.path }}:
            </span>
            <span class="error-message">{{ error.message }}</span>
          </div>
        </div>
        <div
          class="c8y-messages has-success m-b-24"
          *ngIf="errors().length === 0"
        >
          <div
            class="form-control-feedback-message"
          >
            <span class="error-message">{{ 'No errors found' | translate }}</span>
          </div>
        </div>
        <div class="d-flex gap-16 a-i-center flex-no-shrink min-height-0 m-t-auto">
          <c8y-drop-area
            class="drop-area-sm min-width-0"
            [icon]="'upload'"
            *ngIf="!isExporting"
            [accept]="'.json'"
            [maxAllowedFiles]="1"
            [message]="'Import JSON' | translate"
            (dropped)="import($event)"
            [loading]="isImporting"
          ></c8y-drop-area>
          <button
            class="btn btn-primary"
            (click)="export()"
            [disabled]="isExporting || isImporting"
            [ngClass]="{
              'btn-pending': isExporting
            }"
          >
            {{'Export JSON' | translate}}
          </button>
        </div>
      </div>
    </div>
  </ng-container>

</div>

<ng-template #loading>
  <c8y-loading></c8y-loading>
</ng-template>