<div class="content-flex-55 p-b-16">
  <div class="col-7 p-t-4">
    <p>
      <span
        class="text-label-small text-uppercase m-r-4"
        translate
        >Configuration</span
      >
      @if (configSnapshot?.name) {
        <span>
          <strong>{{ configSnapshot.name }}</strong>
        </span>
      } @else {
        ---
      }
    </p>
    <p>
      <span
        class="text-label-small text-uppercase m-r-4"
        translate
        >Last updated</span
      >
      @if (configSnapshot?.time) {
        <small>
          {{ configSnapshot.time | c8yDate }}
        </small>
      } @else {
        ---
      }
    </p>
  </div>
  <div class="col-5 d-flex j-c-end gap-4">
    @if (editableRepositoryMo) {
      <button
        class="btn btn-default btn-sm"
        title="{{ 'Edit in repository' | translate }}"
        type="button"
        (click)="editInRepository.emit(editableRepositoryMo)"
      >
        <i
          [c8yIcon]="'pencil'"
          aria-hidden="true"
        ></i>
        {{ 'Edit in repository' | translate }}
      </button>
    }
    @if (canCallAction) {
      <button
        class="btn btn-default btn-sm"
        title="{{ actionButtonText | translate }}"
        id="action-btn"
        type="button"
        (click)="createDeviceOperation()"
        [disabled]="isCreateOperationDisabled()"
      >
        <i [c8yIcon]="actionButtonIcon"></i>
        {{ actionButtonText | translate }}
      </button>
    }
  </div>
</div>
@if (!configSnapshot?.binary && showBinary()) {
  <div class="c8y-empty-state text-left">
    <h1 [c8yIcon]="'file-image-o'"></h1>
    <p>
      <strong translate>No preview available.</strong>
      <br />
      @if (configSnapshot?.binary !== '') {
        <small translate> The file is not available. </small>
      } @else {
        <small translate>The file is empty.</small>
      }
    </p>
  </div>
}
@if (configSnapshot?.binary && showBinary()) {
  <div class="flex-grow d-flex d-col">
    <c8y-source-code-preview
      class="d-contents"
      [text]="configSnapshot.binary"
      [binaryType]="configSnapshot.binaryType"
      [isDisabled]="true"
    ></c8y-source-code-preview>
    @if (canSaveSnapshot) {
      <div class="p-t-16">
        <button
          class="btn btn-primary btn-sm pull-right m-l-8"
          title="{{ 'Download' | translate }}"
          type="button"
          (click)="download()"
        >
          {{ 'Download' | translate }}
        </button>
        @if (hasPermission()) {
          <button
            class="btn btn-default btn-sm pull-right"
            title="{{ 'Save to repository' | translate }}"
            type="button"
            (click)="saveToRepository()"
          >
            {{ 'Save to repository' | translate }}
          </button>
        }
      </div>
    }
  </div>
}
@if (showOperation()) {
  <div>
    <c8y-operation-details [operation]="operation"></c8y-operation-details>
  </div>
}