<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Reload' | translate }}"
    (click)="updateSnapshots()"
  >
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<div class="card content-fullpage card-has-tabs">
  <tabset>
    @if (showBinaryBasedConfig && !showTextBasedConfig) {
      <div class="card-header separator">
        <div class="card-title">{{ 'Configurations' | translate }}</div>
      </div>
    }
    @if (!showBinaryBasedConfig && showTextBasedConfig) {
      <div class="card-header separator">
        <div class="card-title">{{ 'Text-based configuration' | translate }}</div>
      </div>
    }
    @if (showBinaryBasedConfig) {
      <tab heading="{{ 'Configurations' | translate }}">
        <div class="card--grid card grid__col--4-8--md grid__row--6-6--md m-b-0">
          <!-- DEVICE SUPPORTED CONFIGURATIONS -->
          <div class="card--grid__inner-scroll bg-level-1">
            <div class="p-l-16 p-r-16">
              <h5 class="legend form-block">
                <span translate>Device-supported configurations</span>
              </h5>
            </div>
            <c8y-device-configuration-list
              [itemIcon]="'gears'"
              [items]="supportedConfigurations"
              (configSelected)="onConfigTypeSelected($event)"
            ></c8y-device-configuration-list>
          </div>
          <!-- CONFIGURATION PREVIEW -->
          <div class="card--grid__inner-scroll d-flex d-col flex-grow">
            <div class="card-block d-flex d-col flex-grow">
              <h5 class="legend form-block"><span translate>Preview</span></h5>
              <!-- EMPTY STATE -->
              @if (!configurationType) {
                <c8y-ui-empty-state
                  [icon]="'file-text'"
                  [title]="'No configuration selected.' | translate"
                  [subtitle]="'Select a configuration to preview.' | translate"
                  [horizontal]="true"
                ></c8y-ui-empty-state>
              }
              <!-- PREVIEW AVAILABLE STATE -->
              @if (configurationType) {
                <c8y-device-configuration-preview
                  class="d-flex d-col flex-grow"
                  [actionButtonIcon]="'download'"
                  [device]="device"
                  [configurationType]="configurationType"
                  [configSnapshot]="configSnapshot"
                  [canSaveSnapshot]="true"
                  [operationToTrigger]="'c8y_UploadConfigFile'"
                  [actionButtonText]="'Get snapshot from device' | translate"
                  [isLegacy]="isLegacy"
                ></c8y-device-configuration-preview>
              }
            </div>
          </div>
          <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->
          <div class="card--grid__inner-scroll bg-level-1">
            <div class="p-l-16 p-r-16">
              <h5
                class="legend form-block"
                translate
              >
                Available supported configurations
              </h5>
            </div>
            <!-- EMPTY STATE -->
            @if (!configurationType) {
              <c8y-ui-empty-state
                [icon]="'gears'"
                [title]="'No selection.' | translate"
                [subtitle]="
                  'Select a configuration from the device-supported configuration list.' | translate
                "
                [horizontal]="true"
              ></c8y-ui-empty-state>
            }
            @if (configurationType) {
              <div class="p-r-16">
                <c8y-device-configuration-list
                  [itemIcon]="'file-text'"
                  [items]="repositorySnapshots"
                  [emptyState]="repositorySnapshotsEmptyState"
                  [isFilterEnabled]="true"
                  (configSelected)="onRepositoryConfigSelected($event)"
                ></c8y-device-configuration-list>
              </div>
            }
          </div>
          <!-- CONFIGURATION PREVIEW -->
          <div class="card--grid__inner-scroll d-flex d-col flex-grow">
            <div class="card-block flex-grow d-flex d-col">
              <h5
                class="legend form-block"
                translate
              >
                Preview
              </h5>
              <!-- EMPTY STATE -->
              @if (!repositorySnapshot) {
                <c8y-ui-empty-state
                  [icon]="'file-text'"
                  [title]="'No configuration selected.' | translate"
                  [subtitle]="'Select a configuration to preview.' | translate"
                  [horizontal]="true"
                ></c8y-ui-empty-state>
              }
              <!-- CONFIGURATION SELECTED STATE -->
              @if (repositorySnapshot) {
                <c8y-device-configuration-preview
                  class="d-flex d-col flex-grow"
                  [actionButtonIcon]="'upload'"
                  [device]="device"
                  [configurationType]="configurationType"
                  [configSnapshot]="repositorySnapshot"
                  [operationToTrigger]="'c8y_DownloadConfigFile'"
                  [actionButtonText]="'Send configuration to device' | translate"
                  [isLegacy]="isLegacy"
                  [editableRepositoryMo]="selectedRepositoryMo"
                  (editInRepository)="openEditInRepository($event)"
                ></c8y-device-configuration-preview>
              }
            </div>
          </div>
        </div>
      </tab>
    }
    @if (showTextBasedConfig) {
      <tab heading="{{ 'Text-based configuration' | translate }}">
        <c8y-text-based-configuration></c8y-text-based-configuration>
      </tab>
    }
  </tabset>
</div>