<c8y-title>
  {{ 'Firmware repository' | translate }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    icon="c8y-management"
    label="{{ 'Management' | translate }}"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    icon="c8y-firmware"
    label="{{ 'Firmware repository' | translate }}"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Add firmware' | translate }}"
    (click)="addFirmware()"
    data-cy="firmware-list--toolbar-add-firmware-btn"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add firmware' | translate }}
  </button>
</c8y-action-bar-item>

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

<c8y-help
  src="/docs/device-management-application/managing-device-data/#managing-firmware"
></c8y-help>

<div class="content-fullpage border-top border-bottom">
  <c8y-data-grid
    [title]="'Firmware' | translate"
    [refresh]="refresh$"
    [pagination]="pagination"
    [columns]="columns"
    [actionControls]="actionControls"
    [infiniteScroll]="'auto'"
    [serverSideDataCallback]="serverSideDataCallback"
  >
    <c8y-ui-empty-state
      [icon]="stats?.size > 0 ? 'search' : 'c8y-tools'"
      [title]="stats?.size > 0 ? (noResultsMessage | translate) : (noDataMessage | translate)"
      [subtitle]="stats?.size > 0 ? (noResultsSubtitle | translate) : (noDataSubtitle | translate)"
      *emptyStateContext="let stats"
      [horizontal]="stats?.size > 0"
    >
      @if (stats?.size === 0) {
        <p>
          <button
            class="btn btn-primary"
            title="{{ 'Add firmware' | translate }}"
            type="button"
            (click)="addFirmware()"
          >
            {{ 'Add firmware' | translate }}
          </button>
        </p>
      }
    </c8y-ui-empty-state>
  </c8y-data-grid>
</div>