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

          {{ 'Get configuration from device' | translate }}
        </button>
      </div>
      <c8y-operation-details
        *ngIf="latestOperation !== undefined"
        [operation]="latestOperation"
        class="flex-grow"
      ></c8y-operation-details>
    </div>
  </fieldset>
  <div class="flex-grow">
    <textarea
      [(ngModel)]="config"
      class="form-control fit-h p-r-16 p-l-16"
      [disabled]="reloadingConfig || savingConfig"
      c8y-spellcheck="false"
    ></textarea>
  </div>
  <div class="card-footer fit-w separator" *ngIf="showTextBasedConfigSave">
    <button
      type="button"
      id="send-config-btn"
      (click)="updateConfiguration(config)"
      [disabled]="reloadingConfig || savingConfig || !config"
      class="btn btn-primary"
      [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>