<div class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card split-view--7-5 m-b-0">
      <div class="d-flex d-col flex-grow split-view__list">
        <div class="card-header separator">
          <div
            class="card-title"
            translate
          >
            Current firmware
          </div>
        </div>
        <div class="inner-scroll">
          <div class="card-block p-t-0 p-b-0">
            <!-- EMPTY STATE -->
            @if (isEmpty(deviceFirmwareFragment$ | async)) {
              <div class="c8y-empty-state text-center">
                <div
                  class="h1 c8y-icon-duocolor"
                  c8yIcon="c8y-firmware"
                ></div>
                <p>
                  <strong translate>No firmware installed.</strong>
                  <br />
                  <small translate>Click below to install firmware into this device.</small>
                </p>
              </div>
            } @else {
              <!-- FIRMWARE -->
              <c8y-list-group class="no-border-last">
                <c8y-li>
                  <c8y-li-icon>
                    <i c8yIcon="c8y-firmware"></i>
                  </c8y-li-icon>

                  @if (deviceFirmwareFragment$ | async; as deviceFirmwareFragment) {
                    <c8y-li-body>
                      <!-- Firmware title -->
                      <p class="text-medium">
                        {{ deviceFirmwareFragment.name }}
                      </p>
                      <!-- Firmware description -->
                      @if (repositoryEntry$ | async; as repositoryEntry) {
                        <div>
                          <span
                            class="text-label-small m-r-4"
                            translate
                          >
                            Description
                          </span>
                          <span>
                            {{ repositoryEntry.description }}
                          </span>
                        </div>
                      }

                      <!-- BASE/PATCH VERSION -->
                      <div class="d-flex a-i-baseline">
                        <p
                          class="text-label-small m-r-4"
                          translate
                        >
                          Version
                        </p>
                        @if (deviceFirmwareFragment.version) {
                          <p>
                            {{ deviceFirmwareFragment.version }}
                          </p>
                        } @else {
                          <p>
                            <em class="text-muted">({{ 'not specified`version`' | translate }})</em>
                          </p>
                        }
                      </div>

                      <!-- ADD PATCH -->
                      @if (
                        (supportsFirmwareOperations$ | async) && (this.patches$ | async)?.length > 0
                      ) {
                        <button
                          class="btn btn-xs btn-primary"
                          title="{{ 'Patches available' | translate }}"
                          (click)="addPatch()"
                          [disabled]="changesInProgress$ | async"
                          c8yProductExperience
                          [actionName]="PRODUCT_EXPERIENCE.FIRMWARE.EVENTS.DEVICE_TAB"
                          [actionData]="{
                            component: PRODUCT_EXPERIENCE.FIRMWARE.COMPONENTS.FIRMWARE_DEVICE_TAB,
                            action:
                              PRODUCT_EXPERIENCE.FIRMWARE.ACTIONS.OPEN_INSTALL_FIRMWARE_PATCH_DIALOG
                          }"
                        >
                          {{ 'Patches available' | translate }}
                        </button>
                      }
                    </c8y-li-body>
                  }
                </c8y-li>
              </c8y-list-group>
            }
          </div>
        </div>
        @if (supportsFirmwareOperations$ | async) {
          <div class="card-footer separator-top">
            <!-- INSTALL FIRMWARE -->
            @if (isEmpty(deviceFirmwareFragment$ | async)) {
              <button
                class="btn btn-primary"
                title="{{ 'Install firmware' | translate }}"
                (click)="installFirmware()"
                c8yProductExperience
                [actionName]="PRODUCT_EXPERIENCE.FIRMWARE.EVENTS.DEVICE_TAB"
                [actionData]="{
                  component: PRODUCT_EXPERIENCE.FIRMWARE.COMPONENTS.FIRMWARE_DEVICE_TAB,
                  action: PRODUCT_EXPERIENCE.FIRMWARE.ACTIONS.OPEN_INSTALL_FIRMWARE_DIALOG
                }"
              >
                {{ 'Install firmware' | translate }}
              </button>
            }

            <!-- REPLACE FIRMWARE -->
            @if (!isEmpty(deviceFirmwareFragment$ | async)) {
              <button
                class="btn btn-primary"
                title="{{ 'Replace firmware' | translate }}"
                (click)="installFirmware()"
                [disabled]="changesInProgress$ | async"
                c8yProductExperience
                [actionName]="PRODUCT_EXPERIENCE.FIRMWARE.EVENTS.DEVICE_TAB"
                [actionData]="{
                  component: PRODUCT_EXPERIENCE.FIRMWARE.COMPONENTS.FIRMWARE_DEVICE_TAB,
                  action: PRODUCT_EXPERIENCE.FIRMWARE.ACTIONS.OPEN_REPLACE_FIRMWARE_DIALOG
                }"
              >
                {{ 'Replace firmware' | translate }}
              </button>
            }
          </div>
        }
      </div>
      <div class="inner-scroll d-flex d-col bg-level-1 split-view__detail">
        <div class="card-header separator large-padding sticky-top">
          <div
            class="card-title"
            translate
          >
            Firmware changes
          </div>
        </div>
        <div class="flex-grow">
          @if (changesOperation$ | async) {
            <fieldset
              class="card-block large-padding bg-level-2 p-0"
              id="operation-block"
            >
              <c8y-operation-details
                [operation]="changesOperation$ | async"
              ></c8y-operation-details>
            </fieldset>
          }
        </div>
      </div>
    </div>
  </div>
</div>