<div class="d-flex d-col fit-h">
  <fieldset class="card-block bg-level-1 fit-w">
    <div class="content-flex-50">
      <div class="m-l-auto d-flex">
        <button
          class="btn btn-default btn-sm a-s-center m-t-8 m-b-8"
          title="{{ 'Get configuration from device' | translate }}"
          type="button"
          *ngIf="showTextBasedConfigReload"
          (click)="reloadConfiguration()"
          [disabled]="reloadingConfig || savingConfig"
        >
          <i
            class="m-r-4"
            c8yIcon="refresh"
            *ngIf="reloadingConfig"
            [ngClass]="{ 'icon-spin': reloadingConfig }"
          ></i>
          <i
            class="m-r-4"
            c8yIcon="download"
            *ngIf="!reloadingConfig"
          ></i>

          {{ 'Get configuration from device' | translate }}
        </button>
      </div>
    </div>
  </fieldset>
  <div class="flex-grow">
    <textarea
      class="form-control fit-h p-r-16 p-l-16"
      [attr.aria-label]="'Operations' | translate"
      [(ngModel)]="config"
      [disabled]="reloadingConfig || savingConfig"
      c8y-spellcheck="false"
    ></textarea>
  </div>
  <c8y-operation-details
    class="bg-level-2 p-0"
    *ngIf="latestOperation !== undefined"
    [operation]="latestOperation"
  ></c8y-operation-details>
  <div
    class="card-footer fit-w separator"
    *ngIf="showTextBasedConfigSave"
  >
    <button
      class="btn btn-primary"
      id="send-config-btn"
      type="button"
      (click)="updateConfiguration(config)"
      [disabled]="reloadingConfig || savingConfig || !config"
      [ngClass]="{ 'btn-pending': savingConfig }"
    >
      <span
        title="{{ 'Send' | translate }}"
        *ngIf="!savingConfig"
      >
        {{ 'Send configuration to device' | translate }}
      </span>
      <span
        title="{{ 'Sending…' | translate }}"
        *ngIf="savingConfig"
      >
        {{ 'Sending…' | translate }}
      </span>
    </button>
  </div>
</div>