<c8y-title>
  {{ 'All devices' | translate }}
</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item
    [icon]="'exchange'"
    [label]="'Devices' | translate"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-device-management'"
    [label]="'All devices' | translate"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item [placement]="'right'">
  <button
    class="btn btn-link"
    title="{{ 'Add smart group' | translate }}"
    (click)="createSmartGroup()"
  >
    <i c8yIcon="c8y-group-smart"></i>
    {{ 'Add smart group' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-help
  src="/docs/device-management-application/viewing-all-devices/#viewing-all-devices"
></c8y-help>

<div class="content-fullpage border-top border-bottom">
  <c8y-device-grid
    [columns]="columns$ | async"
    [infiniteScroll]="(count$ | async) === undefined ? 'auto' : undefined"
    (onDeviceQueryStringChange)="deviceQueryStringOutput = $event"
    c8yProductExperience
    [actionName]="'allDevices'"
  ></c8y-device-grid>
</div>