<div class="content-flex-55 p-b-16 flex-no-shrink">
  <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 (canCallAction) {
      <button
        class="btn btn-primary btn-sm"
        title="{{ actionButtonText | translate }}"
        id="action-btn"
        type="button"
        (click)="createDeviceOperation()"
        [disabled]="isCreateOperationDisabled()"
      >
        <i [c8yIcon]="actionButtonIcon"></i>
        {{ actionButtonText | translate }}
      </button>
    }
  </div>
</div>
<fieldset class="c8y-fieldset p-l-16 p-r-16 p-b-16 flex-grow d-flex d-col min-height-0">
  <legend translate>Preview</legend>
  @if (showOperation()) {
    <div>
      <c8y-operation-details [operation]="operation"></c8y-operation-details>
    </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>
            Try getting a snapshot from the device or open it in the repository
          </small>
        } @else {
          <small translate>The file is empty.</small>
        }
      </p>
    </div>
  }
  @if (configSnapshot?.binary && showBinary()) {
    <div class="flex-grow d-flex d-col min-height-0">
      @if (isBinaryContent()) {
        <c8y-ui-empty-state
          class="flex-grow"
          [icon]="'file-o'"
          [title]="'No preview available.' | translate"
          [subtitle]="
            'This configuration is a binary file and cannot be shown as text.' | translate
          "
          [horizontal]="true"
        ></c8y-ui-empty-state>
      } @else {
        <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 flex-no-shrink">
          <button
            class="btn btn-default btn-sm pull-right m-l-8"
            title="{{ 'Download' | translate }}"
            type="button"
            (click)="download()"
          >
            <i
              c8yIcon="download"
              aria-hidden="true"
            ></i>
            {{ 'Download' | translate }}
          </button>
          @if (hasPermission()) {
            <button
              class="btn btn-default btn-sm pull-right"
              title="{{ 'Save to repository' | translate }}"
              type="button"
              (click)="saveToRepository()"
            >
              <i
                c8yIcon="archive-file"
                aria-hidden="true"
              ></i>
              {{ 'Save to repository' | translate }}
            </button>
          }
        </div>
      }
    </div>
  }
  @if (editableRepositoryMo) {
    <div class="d-flex j-c-end p-t-8 flex-no-shrink">
      <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>
    </div>
  }
</fieldset>