<c8y-title>
  {{ (firmware$ | async)?.name }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="c8y-management"
    label="{{ 'Management' | translate }}"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    icon="c8y-firmware"
    path="#/firmware"
    label="{{ 'Firmware repository' | translate }}"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    icon="c8y-firmware"
    label="{{ (firmware$ | async)?.name }}"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  @if (!(isLegacy$ | async)) {
    <button
      class="btn btn-link"
      title="{{ 'Add firmware' | translate }}"
      type="button"
      data-cy="firmware-details--add-firmware-btn"
      (click)="addBaseVersion()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add firmware' | translate }}
    </button>
  }
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'right'">
  @if (canAddPatchVersions$ | async) {
    <button
      class="btn btn-link"
      title="{{ 'Add firmware patch' | translate }}"
      type="button"
      data-cy="firmware-details--add-firmware-patch-btn"
      (click)="addPatchVersion()"
    >
      <i c8yIcon="plus-circle"></i>
      {{ 'Add firmware patch' | translate }}
    </button>
  }
</c8y-action-bar-item>

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

<div class="row">
  <div class="col-lg-12 col-lg-max">
    <div class="card card--fullpage">
      <div class="card-block bg-level-1 flex-no-shrink p-t-24 p-b-24">
        <div class="content-flex-70">
          <div class="text-center">
            <i class="c8y-icon-duocolor icon-48 c8y-icon c8y-icon-firmware"></i>
            <p>
              <small class="label label-info">Firmware</small>
            </p>
          </div>
          <div class="flex-grow col-10">
            <div class="row">
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Name' | translate }}
                  </label>
                  <c8y-input-group-editable
                    required
                    formGroupClass="m-b-0"
                    [ariaLabel]="'Firmware name' | translate"
                    [placeholder]="'e.g. My firmware' | translate"
                    data-cy="firmware-details--name-input"
                    [ngModel]="(firmware$ | async)?.name"
                    (save)="updateFirmware$.next({ name: $event })"
                  ></c8y-input-group-editable>
                </c8y-form-group>
              </div>
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Description' | translate }}
                  </label>
                  <c8y-input-group-editable
                    formGroupClass="m-b-0"
                    [ariaLabel]="'Firmware description' | translate"
                    [placeholder]="'e.g. Firmware for hardware revision B' | translate"
                    data-cy="firmware-details--description-input"
                    [ngModel]="(firmware$ | async)?.description"
                    (save)="updateFirmware$.next({ description: $event })"
                  ></c8y-input-group-editable>
                </c8y-form-group>
              </div>
              <div class="col-md-4">
                <c8y-form-group>
                  <label class="control-label">
                    {{ 'Device type filter' | translate }}

                    <button
                      class="btn-help"
                      [attr.aria-label]="'Help' | translate"
                      popover="{{
                        'If the filter is set, the firmware will show up for installation only for devices of that type. If no filter is set, it will be available for all devices.'
                          | translate
                      }}"
                      placement="right"
                      triggers="focus"
                      container="body"
                      type="button"
                    >
                      <i c8yIcon="question-circle-o"></i>
                    </button>
                  </label>
                  <c8y-input-group-editable
                    formGroupClass="m-b-0"
                    [ariaLabel]="'Device type filter' | translate"
                    [placeholder]="'e.g. {{ example }}' | translate: { example: 'c8y_Linux' }"
                    data-cy="firmware-details--device-type-filter-input"
                    [ngModel]="(firmware$ | async)?.c8y_Filter?.type"
                    (save)="updateFirmware$.next({ c8y_Filter: { type: $event } })"
                  ></c8y-input-group-editable>
                </c8y-form-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="inner-scroll">
        <div class="card-header separator-top-bottom bg-component sticky-top">
          <div
            class="card-title"
            translate
          >
            Versions and patches
          </div>
        </div>

        <div class="card-block p-t-0 p-b-24">
          @if ((baseVersions$ | async)?.data.length === 0) {
            <div>
              <c8y-ui-empty-state
                [icon]="'c8y-firmware'"
                [title]="'No versions to display.' | translate"
                [subtitle]="'Add a new version by clicking below.' | translate"
                [horizontal]="true"
              >
                <button
                  class="btn btn-sm btn-default m-t-8"
                  title="{{ 'Add firmware' | translate }}"
                  type="button"
                  (click)="addBaseVersion()"
                >
                  <i c8yIcon="plus-circle"></i>
                  {{ 'Add firmware' | translate }}
                </button>
              </c8y-ui-empty-state>
            </div>
          }

          @if ((baseVersions$ | async)?.data.length > 0) {
            <c8y-list-group>
              <c8y-li
                *c8yFor="let baseVersion of baseVersions$ | async; let i = index; loadMore: 'auto'"
                [emptyActions]="!(getPatchVersions$(baseVersion) | async)?.data.length"
                [collapsed]="!expanded[baseVersion.id]"
                (collapsedChange)="expanded[baseVersion.id] = !$event"
              >
                <c8y-li-icon>
                  <i c8yIcon="c8y-firmware"></i>
                </c8y-li-icon>
                <c8y-li-body class="content-flex-50">
                  <div class="col-4">
                    <p
                      class="text-truncate"
                      title="{{ baseVersion.c8y_Firmware.version }}"
                    >
                      {{ baseVersion.c8y_Firmware.version }}
                    </p>
                  </div>
                  <div class="col-5">
                    <p class="text-truncate">
                      <span
                        class="text-label-small m-r-8"
                        translate
                      >
                        File
                      </span>
                      @if (baseVersion.c8y_Firmware.url === '') {
                        <span title="{{ 'Provided by device' | translate }}">
                          {{ 'Provided by device' | translate }}
                        </span>
                      } @else {
                        <span title="{{ getBinaryName$(baseVersion.c8y_Firmware.url) | async }}">
                          <c8y-file-download
                            url="{{ baseVersion.c8y_Firmware.url }}"
                          ></c8y-file-download>
                        </span>
                      }
                    </p>
                  </div>
                  <div class="col-2 d-flex a-i-start">
                    @if (isLegacy$ | async) {
                      <span class="label label-warning m-l-auto-sm">
                        {{ 'Legacy' | translate }}
                      </span>
                    }
                    @if (!(isLegacy$ | async)) {
                      <span>
                        @if ((getPatchVersionsCount$(baseVersion) | async) === null) {
                          <span>
                            <span class="label label-info">
                              <i
                                class="icon-spin"
                                c8yIcon="circle-o-notch"
                              ></i>
                            </span>
                          </span>
                        }
                        @if ((getPatchVersionsCount$(baseVersion) | async) !== null) {
                          <span>
                            <span [ngPlural]="getPatchVersionsCount$(baseVersion) | async">
                              <ng-template ngPluralCase="=0">
                                <span class="label label-default m-l-auto-sm">
                                  <span translate>No patches</span>
                                </span>
                              </ng-template>
                              <ng-template ngPluralCase="=1">
                                <span class="label label-info">
                                  <span translate>1 patch</span>
                                </span>
                              </ng-template>
                              <ng-template ngPluralCase="other">
                                <span class="label label-info">
                                  <span
                                    ngNonBindable
                                    translate
                                    [translateParams]="{
                                      count: getPatchVersionsCount$(baseVersion) | async
                                    }"
                                  >
                                    {{ count }} patches
                                  </span>
                                </span>
                              </ng-template>
                            </span>
                          </span>
                        }
                      </span>
                    }
                  </div>
                  @if (!(isLegacy$ | async)) {
                    <div class="fit-h-20 visible-xs">
                      <button
                        class="btn btn-default btn-sm m-t-8"
                        title="{{ 'Delete' | translate }}"
                        type="button"
                        (click)="deleteBaseVersion(baseVersion)"
                      >
                        <i c8yIcon="delete"></i>
                        {{ 'Delete' | translate }}
                      </button>
                    </div>
                  }
                  @if (!(isLegacy$ | async)) {
                    <div class="m-l-auto fit-h-20 p-r-8 hidden-xs">
                      <button
                        class="btn btn-dot btn-dot--danger showOnHover"
                        [attr.aria-label]="'Delete' | translate"
                        tooltip="{{ 'Delete' | translate }}"
                        type="button"
                        data-cy="firmware-details--delete-base-version"
                        [delay]="500"
                        (click)="deleteBaseVersion(baseVersion)"
                      >
                        <i c8yIcon="delete"></i>
                      </button>
                    </div>
                  }
                </c8y-li-body>
                @if ((getPatchVersions$(baseVersion) | async)?.data.length) {
                  <c8y-li-collapse>
                    <c8y-list-group class="separator-top">
                      <c8y-li
                        *c8yFor="
                          let patchVersion of getPatchVersions$(baseVersion) | async;
                          let i = index;
                          loadMore: 'auto'
                        "
                      >
                        <c8y-li-icon>
                          <i c8yIcon="c8y-firmware"></i>
                        </c8y-li-icon>
                        <c8y-li-body class="content-flex-50">
                          <div class="col-4">
                            {{ patchVersion.c8y_Firmware.version }}
                          </div>
                          <div class="col-5">
                            <div class="text-truncate">
                              <span
                                class="text-label-small m-r-8"
                                translate
                              >
                                File
                              </span>
                              @if (patchVersion?.c8y_Firmware?.url === '') {
                                <span title="{{ 'Provided by device' | translate }}">
                                  {{ 'Provided by device' | translate }}
                                </span>
                              } @else {
                                <span title="patchVersion.c8y_Firmware.url">
                                  <c8y-file-download
                                    [url]="patchVersion.c8y_Firmware.url"
                                  ></c8y-file-download>
                                </span>
                              }
                            </div>
                          </div>
                          <div class="visible-xs m-t-8">
                            <button
                              class="btn btn-danger btn-xs"
                              title="{{ 'Delete' | translate }}"
                              type="button"
                              data-cy="firmware-details--delete-patch-version"
                              (click)="deletePatchVersion(patchVersion)"
                            >
                              <i c8yIcon="delete"></i>
                              {{ 'Delete' | translate }}
                            </button>
                          </div>
                          <div class="m-l-auto p-r-8 hidden-xs fit-h-20">
                            <button
                              class="btn btn-dot text-danger showOnHover"
                              [attr.aria-label]="'Delete' | translate"
                              tooltip="{{ 'Delete' | translate }}"
                              placement="right"
                              type="button"
                              [delay]="500"
                              (click)="deletePatchVersion(patchVersion)"
                            >
                              <i
                                c8yIcon="delete"
                                data-cy="firmware-details--Remove-icon"
                              ></i>
                            </button>
                          </div>
                        </c8y-li-body>
                      </c8y-li>
                    </c8y-list-group>
                  </c8y-li-collapse>
                }
              </c8y-li>
            </c8y-list-group>
          }
        </div>
      </div>
    </div>
  </div>
</div>