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

@if (isAppOwner) {
  <c8y-action-bar-item [placement]="'right'">
    <button
      class="btn btn-link"
      title="{{ 'Data sharing' | translate }}"
      type="button"
      (click)="openDataSharingModal()"
    >
      <i
        c8yIcon="share"
        aria-hidden="true"
      ></i>
      {{ 'Data sharing' | translate }}
    </button>
  </c8y-action-bar-item>
}

<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;
        @let sourceApp = getSourceAppName(context.item);

        <div class="d-flex a-i-center gap-8 flex-wrap">
          {{ dashboardName }}
          @if (sourceApp) {
            @let tooltipText =
              'This dashboard belongs to "{{app}}". Manage its visibility there.'
                | translate: { app: sourceApp };
            <span
              class="label label-primary"
              [tooltip]="tooltipText"
              placement="top"
              container="body"
            >
              {{ sourceApp }}
            </span>
          }
        </div>
      </ng-container>
    </c8y-column>
  </c8y-data-grid>
</div>