<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>
    <div class="card-header separator" *ngIf="showBinaryBasedConfig && !showTextBasedConfig">
      <div class="card-title">{{ 'Configurations' | translate }}</div>
    </div>
    <div class="card-header separator" *ngIf="!showBinaryBasedConfig && showTextBasedConfig">
      <div class="card-title">{{ 'Text-based configuration' | translate }}</div>
    </div>
    <tab heading="{{ 'Configurations' | translate }}" *ngIf="showBinaryBasedConfig">
      <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
            [items]="supportedConfigurations"
            [itemIcon]="'gears'"
            (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 -->

            <c8y-ui-empty-state
              *ngIf="!configurationType"
              [icon]="'file-text'"
              [title]="'No configuration selected.' | translate"
              [subtitle]="'Select a configuration to preview.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>

            <!-- PREVIEW AVAILABLE STATE -->
            <c8y-device-configuration-preview
              *ngIf="configurationType"
              [device]="device"
              [configurationType]="configurationType"
              [configSnapshot]="configSnapshot"
              [canSaveSnapshot]="true"
              [operationToTrigger]="'c8y_UploadConfigFile'"
              [actionButtonText]="'Get snapshot from device' | translate"
              [actionButtonIcon]="'download'"
              [isLegacy]="isLegacy"
              class="d-flex d-col flex-grow"
            ></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 -->

          <c8y-ui-empty-state
            *ngIf="!configurationType"
            [icon]="'gears'"
            [title]="'No selection.' | translate"
            [subtitle]="
              'Select a configuration from the device-supported configuration list.' | translate
            "
            [horizontal]="true"
          ></c8y-ui-empty-state>

          <div class="p-r-16" *ngIf="configurationType">
            <c8y-device-configuration-list
              [items]="repositorySnapshots"
              [itemIcon]="'file-text'"
              [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 -->
            <c8y-ui-empty-state
              *ngIf="!repositorySnapshot"
              [icon]="'file-text'"
              [title]="'No configuration selected.' | translate"
              [subtitle]="'Select a configuration to preview.' | translate"
              [horizontal]="true"
            ></c8y-ui-empty-state>

            <!-- CONFIGURATION SELECTED STATE -->
            <c8y-device-configuration-preview
              *ngIf="repositorySnapshot"
              [device]="device"
              [configurationType]="configurationType"
              [configSnapshot]="repositorySnapshot"
              [operationToTrigger]="'c8y_DownloadConfigFile'"
              [actionButtonText]="'Send configuration to device' | translate"
              [actionButtonIcon]="'upload'"
              [isLegacy]="isLegacy"
              class="d-flex d-col flex-grow"
            ></c8y-device-configuration-preview>
          </div>
        </div>
      </div>
    </tab>
    <tab heading="{{ 'Text-based configuration' | translate }}" *ngIf="showTextBasedConfig">
      <c8y-text-based-configuration></c8y-text-based-configuration>
    </tab>
  </tabset>
</div>