<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">
  <div class="card-header separator">
    <div
      class="card-title"
      translate
    >
      Configurations
    </div>
  </div>
  <tabset>
    @if (showBinaryBasedConfig && !showTextBasedConfig) {
      <div class="card-header separator">
        <div class="card-title">{{ 'From repository' | translate }}</div>
      </div>
    }
    @if (!showBinaryBasedConfig && showTextBasedConfig) {
      <div class="card-header separator">
        <div class="card-title">{{ 'Custom' | translate }}</div>
      </div>
    }
    @if (showBinaryBasedConfig) {
      <tab>
        <ng-template tabHeading>
          <i
            c8yIcon="gears"
            aria-hidden="true"
          ></i>
          {{ 'From repository' | translate }}
        </ng-template>
        <c8y-resizable-grid
          [orientation]="'vertical'"
          [trackId]="'c8y-device-configuration-split-view'"
          [leftColumnWidth]="'50%'"
          [collapsible]="false"
        >
          <!-- ON DEVICE -->
          <div
            class="d-flex d-col fit-h min-height-0"
            left-pane
          >
            <div class="p-l-16 p-r-16">
              <h5 class="legend form-block">
                <span translate>On device</span>
              </h5>
            </div>
            <div class="card--grid grid__col--4-8--md m-b-0 flex-grow min-height-0">
              <!-- DEVICE SUPPORTED CONFIGURATIONS -->
              <div class="card--grid__inner-scroll bg-level-1">
                <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 min-height-0 bg-component"
              >
                <div class="card-block d-flex d-col flex-grow min-height-0">
                  <!-- EMPTY STATE -->
                  @if (!configurationType) {
                    <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>
                      <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>
                    </fieldset>
                  }
                  <!-- PREVIEW AVAILABLE STATE -->
                  @if (configurationType) {
                    <c8y-device-configuration-preview
                      class="d-flex d-col flex-grow min-height-0"
                      [actionButtonIcon]="'arrow-down'"
                      [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>
            </div>
          </div>

          <!-- AVAILABLE FROM REPOSITORY: depends on the on-device selection above -->
          <div
            class="d-flex d-col fit-h min-height-0"
            right-pane
          >
            <div class="p-l-16 p-r-16">
              <h5 class="legend form-block">
                <span
                  class="m-r-8"
                  translate
                >
                  Available from repository
                </span>
                <button
                  class="btn-help"
                  [attr.aria-label]="'Help' | translate"
                  popover="{{
                    'Supported predefined configurations you can send to this device' | translate
                  }}"
                  placement="right"
                  triggers="focus"
                  container="body"
                  type="button"
                >
                  <i c8yIcon="question-circle-o"></i>
                </button>
              </h5>
            </div>
            <div class="card--grid grid__col--4-8--md m-b-0 flex-grow min-height-0">
              <!-- AVAILABLE SUPPORTED CONFIGURATIONS -->
              <div class="card--grid__inner-scroll bg-level-1">
                <!-- EMPTY STATE -->
                @if (!configurationType) {
                  <c8y-ui-empty-state
                    [icon]="'gears'"
                    [title]="'No configuration selected.' | translate"
                    [subtitle]="
                      'Select a configuration type from the list above to view matching repository items.'
                        | 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 min-height-0 bg-component"
              >
                <div class="card-block d-flex d-col flex-grow min-height-0">
                  <!-- EMPTY STATE -->
                  @if (!repositorySnapshot) {
                    <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>
                      <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>
                    </fieldset>
                  }
                  <!-- CONFIGURATION SELECTED STATE -->
                  @if (repositorySnapshot) {
                    <c8y-device-configuration-preview
                      class="d-flex d-col flex-grow min-height-0"
                      [actionButtonIcon]="'arrow-up'"
                      [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>
          </div>
        </c8y-resizable-grid>
      </tab>
    }
    @if (showTextBasedConfig) {
      <tab>
        <ng-template tabHeading>
          <i
            c8yIcon="code"
            aria-hidden="true"
          ></i>
          {{ 'Custom' | translate }}
        </ng-template>
        <c8y-text-based-configuration></c8y-text-based-configuration>
      </tab>
    }
  </tabset>
</div>