<c8y-title>
  {{ 'Dashboard manager' | translate }}
</c8y-title>

<div class="content-fullpage d-flex d-col border-top border-bottom">
  <c8y-data-grid
    [title]="title"
    [loadMoreItemsLabel]="loadMoreItemsLabel"
    [loadingItemsLabel]="loadingItemsLabel"
    [columns]="columns"
    [pagination]="pagination"
    [serverSideDataCallback]="serverSideDataCallback"
    [infiniteScroll]="'auto'"
    [actionControls]="actionControls"
    [showSearch]="true"
    [displayOptions]="displayOptions"
    [refresh]="refresh"
    [expandableRows]="'ASYNC'"
  >
    <div
      *c8yExpandableRow="
        let context;
        let asyncRenderSuccess = asyncRenderSuccess;
        let asyncRenderFail = asyncRenderFail
      "
    >
      <c8y-type-dashboard-info
        [context]="context"
        [asyncRenderSuccess]="asyncRenderSuccess"
        [asyncRenderFail]="asyncRenderFail"
      ></c8y-type-dashboard-info>
    </div>

    <c8y-ui-empty-state
      [icon]="'search'"
      [title]="'No matching dashboards.' | translate"
      [subtitle]="'Refine your search terms' | translate"
      [horizontal]="true"
    ></c8y-ui-empty-state>

    <c8y-column name="icon">
      <ng-container *c8yCellRendererDef="let context">
        <i [c8yIcon]="context.value"></i>
      </ng-container>
    </c8y-column>

    <c8y-column name="deviceTypeValue">
      <ng-container *c8yCellRendererDef="let context">
        <span class="label label-info">
          {{ context.value }}
        </span>
      </ng-container>
    </c8y-column>

    <c8y-column name="name">
      <ng-container *c8yCellRendererDef="let context">
        @let dashboardItem = context.item.c8y_Dashboard;
        @let dashboardName =
          dashboardItem.translateDashboardTitle
            ? (dashboardItem.name | translate)
            : dashboardItem.name;

        {{ dashboardName }}
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>