@if (title) {
  <c8y-title>
    {{ title }}
  </c8y-title>
}

@if (dashboard?.deviceType && dashboard.deviceTypeValue) {
  <c8y-action-bar-item
    [placement]="'right'"
    [priority]="10000"
  >
    <button
      class="btn-clean btn-link"
      popoverTitle="{{ 'Dashboard template' | translate }}"
      [attr.aria-label]="'Help' | translate"
      [popover]="dashboardTypePopoverRef"
      placement="bottom"
      triggers="focus"
      container="body"
      type="button"
    >
      <span class="tag tag--info text-12">
        <span class="dashboard-template-marker"></span>
        {{ dashboardTypeLabel | translate: { dashboardType: dashboard.deviceTypeValue } }}
      </span>
    </button>
    <ng-template #dashboardTypePopoverRef>
      <div
        [innerHTML]="dashboardTypePopover | translate: { dashboardType: dashboard.deviceTypeValue }"
      ></div>
    </ng-template>
  </c8y-action-bar-item>
}

@if (defaultWidgets.length > 0) {
  <c8y-action-bar-item
    [placement]="'right'"
    [priority]="-1"
  >
    <button
      class="btn btn-link"
      title="{{ 'Reset widgets' | translate }}"
      type="button"
      px-event="Reset dashboard"
      (click)="restore()"
      [disabled]="disabled || !mo?.id || (widgetsDashboard?.editMode$ | async)"
      data-cy="context-dashboard--button-reset-dashboard"
    >
      <i
        class="m-r-4"
        c8yIcon="reset"
      ></i>
      <span class="visible-xs-inline hidden-sm visible-md-inline visible-lg-inline">
        {{ 'Reset widgets' | translate }}
      </span>
    </button>
  </c8y-action-bar-item>
}

@if (showContextHelpButton) {
  <c8y-help src="/docs/cockpit/working-with-dashboards/#working-with-dashboards"></c8y-help>
}

<c8y-dashboard-detail
  class="d-contents"
  [isReport]="isReport"
  [dashboard]="dashboard"
  [mo]="mo"
  [context]="context"
  [deviceType]="context?.type"
  [hideAvailability]="hideAvailability"
  [isNamedDashboard]="isNamedDashboard"
  (dashboardSaved)="reloadDashboard($event)"
  (previewChanged)="dashboardPreview($event)"
></c8y-dashboard-detail>

<c8y-widgets-dashboard
  [context]="context"
  [contextDashboard]="dashboard"
  [widgets]="widgets"
  [isCopyDisabled]="isCopyDisabled"
  [isSaveDisabled]="contextDashboardStateService.isSaveDisabled | async"
  [settings]="{
    isLoading: isLoading,
    isDisabled: disabled,
    canDelete: canDelete && !!dashboard,
    translateWidgetTitle: dashboard?.translateWidgetTitle ?? translateWidgetTitle,
    translateDashboardTitle: dashboard?.translateDashboardTitle ?? translateDashboardTitle,
    allowFullscreen: moduleConfig.allowFullscreen,
    title: setTitle ? dashboard?.name || title : undefined,
    widgetMargin: dashboard?.widgetMargin,
    canCopy: canCopy && !!dashboard,
    defaultWidth: dashboard?.columns >= 24 ? 8 : 4,
    columns: dashboard?.columns || 12,
    layout: dashboard?.layout || 'grid',
    alignViewHeight: !!dashboard?.alignViewHeight,
    rows: dashboard?.alignViewHeight ? dashboard?.rows || 24 : 'auto',
    float: !!dashboard?.float
  }"
  [breadcrumb]="breadcrumbSettings"
  [editModeButtons]="{
    undoButtonDisabled: editModeService.undoButtonDisabled,
    changeToUndoName: editModeService.changeToUndoName,
    redoButtonDisabled: !editModeService.redoStackLastItem,
    changeToRedoName: editModeService.redoStackLastItem?.name
  }"
  (onChangeDashboard)="positionOrWidgetDimensionChange($event)"
  (onAddWidget)="addWidget()"
  (onEditWidget)="editWidget($event)"
  (onDeleteWidget)="deleteWidget($event)"
  (onSaveDashboard)="saveWidgetsToDashboard()"
  (onCancelDashboard)="cancelEditMode()"
  (revertChange)="revertChange($event)"
  (onChangeStart)="addDashboardClassToBody()"
  (onChangeEnd)="removeDashboardClassFromBody()"
  (onEditDashboard)="editDashboard()"
  (onCopyDashboard)="copyDashboard()"
  (onDeleteDashboard)="deleteDashboard()"
></c8y-widgets-dashboard>