<c8y-title>{{ 'Device profiles' | translate }}</c8y-title>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    (click)="createDeviceProfile()"
    title="{{ 'Add device profile' | translate }}"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add device profile' | translate }}
  </button>
</c8y-action-bar-item>
<c8y-action-bar-item
  [placement]="'right'">
  <button class="btn btn-link"
    (click)="loadDeviceProfiles()"
    title="{{ 'Reload' | translate }}">
    <i
      c8yIcon="refresh"
      [ngClass]="{ 'icon-spin': reloading }"
    ></i>
    {{ 'Reload' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help src="/users-guide/device-management/#device-profiles"></c8y-help>

<!-- EMPTY STATE -->
<div class="c8y-empty-state m-t-40"
  *ngIf="(deviceProfiles$ | async)?.data.length === 0"
>
  <h1 class="c8y-icon-duocolor"
    [c8yIcon]="'c8y-device-profile'"
  ></h1>
  <h3 translate>
    No device profiles available.
  </h3>
  <p translate>
    Add a new device profile by clicking below.
  </p>
  <p>
    <button
      class="btn btn-primary"
      title="{{ 'Add device profile' | translate }}"
      (click)="createDeviceProfile()"
    >
      {{ 'Add device profile' | translate }}
    </button>
  </p>
</div>

<!-- DEVICE PROFILES LIST -->
<c8y-list-group
  class="m-b-24"
  [ngClass]="{ 'dd-low': (deviceProfiles$ | async)?.data.length < 10 }"
>
  <c8y-li
    [emptyActions]="true"
    class="page-sticky-header hidden-xs"
    *ngIf="(deviceProfiles$ | async)?.data.length > 0"
  >
    <c8y-li-icon>
      <i class="p-l-24"></i>
    </c8y-li-icon>
    <c8y-li-body class="content-flex-50">
      <div class="col-6">
        {{ 'Device profile' | translate }}
      </div>
      <div class="col-6">
        {{ 'Device type' | translate }}
      </div>
    </c8y-li-body>
  </c8y-li>
  <c8y-li *c8yFor="let deviceProfile of deviceProfiles$">
    <c8y-li-icon>
      <i c8yIcon="c8y-device-profile"></i>
    </c8y-li-icon>

    <c8y-li-body class="content-flex-50">
      <div class="col-6" title="{{ deviceProfile.name }}">
        <button
          class="btn-clean max-width-inherit"
          routerLink="/device-profiles/{{ deviceProfile.id }}"
        >
          <span class="text-truncate">
            {{ deviceProfile.name }}
          </span>
        </button>
      </div>
      <div class="col-6" title="{{ deviceProfile.c8y_Filter?.type || '-' }}">
        <span class="text-label-small m-r-4 visible-xs" translate>
          Device type
        </span>
        <span class="text-truncate" *ngIf="deviceProfile.c8y_Filter?.type; else emptyText">
          {{ deviceProfile.c8y_Filter?.type }}
        </span>
      </div>
      <ng-template #emptyText>
        <small class="text-muted">
          <em>
            {{ 'Undefined' | translate }}
          </em>
        </small>
      </ng-template>
    </c8y-li-body>

    <c8y-li-action
      routerLink="/device-profiles/{{ deviceProfile.id }}"
      icon="pencil"
      label="{{ 'Edit' | translate }}"
    >
    </c8y-li-action>
    <c8y-li-action
      (click)="duplicateDeviceProfile(deviceProfile)"
      icon="copy"
      label="{{ 'Duplicate' | translate }}"
    >
    </c8y-li-action>
    <c8y-li-action
      (click)="deleteDeviceProfile(deviceProfile)"
      icon="trash"
      label="{{ 'Delete' | translate }}"
    >
    </c8y-li-action>
  </c8y-li>
</c8y-list-group>