<c8y-title>{{ title | translate }}</c8y-title>
<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'c8y-tools'"
    [label]="'Configuration' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-tools'"
    [label]="title | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>
<c8y-action-bar-item
  [placement]="'right'"
  *c8yIfAllowed="['ROLE_INVENTORY_ADMIN']"
  [priority]="1"
>
  <button
    class="btn btn-link"
    [title]="'Add data point' | translate"
    type="button"
    (click)="addDatapointEntry()"
    data-cy="c8y-datapoint-library-list--add-data-point"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add data point' | translate }}
  </button>
</c8y-action-bar-item>

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

<c8y-action-bar-item
  [placement]="'left'"
  itemClass="navbar-form hidden-xs"
>
  <c8y-list-display-switch
    (onListClassChange)="listClass = $event"
    [listLength]="(datapoints$ | async)?.data?.length"
  ></c8y-list-display-switch>
</c8y-action-bar-item>

<c8y-help src="/docs/cockpit/data-point-library/#data-point-library"></c8y-help>

<!-- empty state
-->
@if ((datapoints$ | async)?.data?.length === 0) {
  <c8y-ui-empty-state
    [icon]="'c8y-data-points'"
    [title]="'No data points to display.' | translate"
    [subtitle]="'Add a data point using the button below.' | translate"
  >
    <p>
      <button
        class="btn btn-primary"
        [title]="'Add data point' | translate"
        type="button"
        (click)="addDatapointEntry()"
      >
        <i c8yIcon="plus-circle"></i>
        {{ 'Add data point' | translate }}
      </button>
    </p>
  </c8y-ui-empty-state>
}

<!-- loading indicator -->
@if (isLoading) {
  <div class="d-flex j-c-center">
    <c8y-loading></c8y-loading>
  </div>
}

@if (!isLoading && (datapoints$ | async); as datapoints) {
  <div
    class="card-group"
    [ngClass]="listClass"
  >
    @if (datapoints.data.length) {
      <div class="page-sticky-header hidden-xs">
        <div class="d-flex">
          <div class="card-header">
            <div class="card-icon"></div>
            <p translate>Label</p>
          </div>
          <div class="card-actions"></div>
          <div class="card-block p-l-0">
            <div class="col-sm-3 p-l-16">
              <p translate>Fragment</p>
            </div>
            <div class="col-sm-2">
              <p translate>Series</p>
            </div>
            <div class="col-sm-1">
              <span translate>Unit</span>
            </div>
            <div class="col-sm-2">
              <span translate>Target</span>
            </div>
            <div class="col-sm-4">
              <span translate>Range</span>
            </div>
          </div>
        </div>
      </div>
    }
    <div
      class="col-sm-6 col-md-4 col-lg-3 col-xs-12"
      *c8yFor="let datapoint of datapoints; loadMore: 'hidden'; pipe: parsePipe"
    >
      <div
        class="card pointer"
        (click)="editDatapointEntry(datapoint)"
      >
        <div
          class="card-actions"
          (click)="$event.stopPropagation()"
        >
          <div
            class="dropdown settings"
            dropdown
            #datapointOptionsDropdown="bs-dropdown"
            [cdkTrapFocus]="datapointOptionsDropdown.isOpen"
          >
            <button
              class="dropdown-toggle c8y-dropdown"
              [title]="'Actions' | translate"
              type="button"
              dropdownToggle
            >
              <i c8yIcon="ellipsis-v"></i>
            </button>
            <ul
              class="dropdown-menu dropdown-menu-right"
              *dropdownMenu
            >
              <li>
                <button
                  [title]="'Edit' | translate"
                  type="button"
                  (click)="editDatapointEntry(datapoint)"
                >
                  <i c8yIcon="pencil"></i>
                  {{ 'Edit' | translate }}
                </button>
              </li>
              <li>
                <button
                  [title]="'Remove' | translate"
                  type="button"
                  (click)="removeDatapointEntry(datapoint)"
                >
                  <i c8yIcon="delete"></i>
                  {{ 'Remove' | translate }}
                </button>
              </li>
            </ul>
          </div>
        </div>
        <div class="card-header separator">
          <div class="card-icon">
            <i
              c8yIcon="circle"
              [style.color]="datapoint.c8y_Kpi?.color"
            ></i>
          </div>
          <div
            class="card-title text-truncate"
            [title]="datapoint.c8y_Kpi | datapointLabel"
          >
            {{ datapoint.c8y_Kpi | datapointLabel }}
          </div>
        </div>
        <div class="card-block bg-level-1 p-b-24 card-hidden-list">
          <div class="col-sm-3 col-md-2">
            <c8y-range-display
              [config]="datapoint.c8y_Kpi"
              [display]="'compact'"
            ></c8y-range-display>
          </div>
        </div>
        <div class="card-block">
          <div class="col-sm-3 text-truncate">
            <span>
              <label
                class="text-label-small m-r-4"
                translate
              >
                Fragment
              </label>
              <span [title]="datapoint.c8y_Kpi?.fragment">
                {{ datapoint.c8y_Kpi?.fragment }}
              </span>
            </span>
          </div>
          <div class="col-sm-2 text-truncate">
            <label
              class="text-label-small m-r-4"
              translate
            >
              Series
            </label>
            <span [title]="datapoint.c8y_Kpi?.series">
              {{ datapoint.c8y_Kpi?.series }}
            </span>
          </div>
          <div class="col-sm-1 text-truncate card-hidden-grid">
            @if (datapoint.c8y_Kpi?.unit) {
              <span>
                <label
                  class="text-label-small m-r-4"
                  translate
                >
                  Unit
                </label>
                <span [title]="datapoint.c8y_Kpi?.unit | datapointUnit">
                  {{ datapoint.c8y_Kpi?.unit | datapointUnit }}
                </span>
              </span>
            }
          </div>
          <div class="col-sm-2 text-truncate">
            @if (datapoint.c8y_Kpi?.target) {
              <span>
                <label
                  class="text-label-small m-r-4"
                  translate
                >
                  Target
                </label>
                <span [title]="datapoint.c8y_Kpi?.target">
                  {{ datapoint.c8y_Kpi?.target }}
                </span>
              </span>
            }
          </div>
          <div class="col-sm-4 card-hidden-grid">
            <c8y-range-display
              [config]="datapoint.c8y_Kpi"
              [display]="'inline'"
            ></c8y-range-display>
          </div>
        </div>
      </div>
    </div>
  </div>
}