<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">
      <h4 class="card-title">{{ 'Configurations' | translate }}</h4>
    </div>
    <div class="card-header separator" *ngIf="!showBinaryBasedConfig && showTextBasedConfig">
      <h4 class="card-title">{{ 'Text-based configuration' | translate }}</h4>
    </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-gray-white">
          <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 -->
            <div class="c8y-empty-state text-left" *ngIf="!configurationType">
              <h1 [c8yIcon]="'file-text'"></h1>
              <p>
                <strong translate>No configuration selected.</strong><br />
                <small translate>Select a configuration to preview</small>
              </p>
            </div>

            <!-- 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-gray-white">
          <div class="p-l-16 p-r-16">
            <h5 class="legend form-block" translate>Available supported configurations</h5>
          </div>

          <!-- EMPTY STATE -->
          <div class="c8y-empty-state text-left" *ngIf="!configurationType">
            <h1 [c8yIcon]="'gears'"></h1>
            <p>
              <strong translate>No selection</strong><br />
              <small translate
                >Select a configuration from the device-supported configuration list</small
              >
            </p>
          </div>
          <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 -->

            <div class="c8y-empty-state text-left" *ngIf="!repositorySnapshot">
              <h1 [c8yIcon]="'file-text'"></h1>
              <p>
                <strong translate>No configuration selected.</strong><br />
                <small *ngIf="!configurationType; else noSnapshot" translate
                  >Select a configuration to preview</small
                >
                <ng-template #noSnapshot>
                  <small translate>Select the configuration you want to preview</small>
                </ng-template>
              </p>
            </div>

            <!-- 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>