<c8y-title *ngIf="!!settings.title">
  {{ settings.title | translate }}
</c8y-title>

<c8y-breadcrumb *ngIf="!!breadcrumb">
  <c8y-breadcrumb-item
    [icon]="breadcrumb.icon"
    [label]="breadcrumb.label"
    [path]="breadcrumb.path"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-action-bar-item
  [placement]="'right'"
  *ngIf="onAddWidget.observers.length"
>
  <button
    class="btn btn-link"
    title="{{ 'Add widget' | translate }}"
    type="button"
    [disabled]="settings.isFrozen || settings.isDisabled"
    (click)="onAddWidget.emit()"
    data-cy="widget-dashboard--Add-widget"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add widget' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'right'"
  *ngIf="onEditDashboard.observers.length"
>
  <button
    class="btn btn-link"
    title="{{ 'Edit' | translate }}"
    type="button"
    [disabled]="settings.isFrozen || settings.isDisabled"
    (click)="onEditDashboard.emit()"
    data-cy="widgets-dashboard--edit-widget"
  >
    <i c8yIcon="pencil"></i>
    {{ 'Edit' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'right'"
  *ngIf="settings.allowFullscreen"
>
  <button
    class="btn btn-link"
    title="{{ 'Full screen' | translate }}"
    type="button"
    (click)="toggleFullscreen()"
    data-cy="widgets-dashboard--Full-screen"
  >
    <i [c8yIcon]="fullScreen() ? 'compress' : 'expand'"></i>
    {{ 'Full screen' | translate }}
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'right'"
  itemClass="navbar-form"
  *ngIf="onFreeze.observers.length"
>
  <button
    class="btn btn-default"
    title="{{ 'Lock/unlock this dashboard' | translate }}"
    type="button"
    [ngClass]="{ active: settings.isFrozen }"
    (click)="onFreeze.emit(settings)"
    [disabled]="settings.isDisabled"
    uib-btn-checkbox
    data-cy="widgets-dashboard--button-lock-toggle"
  >
    <i [c8yIcon]="settings.isFrozen ? 'lock' : 'unlock'"></i>
  </button>
</c8y-action-bar-item>
<c8y-action-bar-item
  [placement]="'more'"
  [priority]="-2000"
  *ngIf="settings.canCopy"
>
  <button
    class="btn btn-link"
    title="{{
      settings.isCopyDisabled ? copyDashboardWarningMessage : ('Copy dashboard' | translate)
    }}"
    type="button"
    data-cy="widgets-dashboard--copy-dashboard"
    (click)="onCopyDashboard.emit()"
    [disabled]="settings.isCopyDisabled"
  >
    <i c8yIcon="clone"></i>
    <span
      class="m-l-4"
      translate
    >
      Copy dashboard
    </span>
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item
  [placement]="'more'"
  [priority]="-3000"
  *ngIf="settings.canDelete && onDeleteDashboard.observers.length"
>
  <button
    title="{{ 'Delete dashboard' | translate }}"
    type="button"
    (click)="onDeleteDashboard.emit()"
    [disabled]="settings.isFrozen || settings.isDisabled"
  >
    <i c8yIcon="delete"></i>
    <span
      class="m-l-4"
      translate
    >
      Delete dashboard
    </span>
  </button>
</c8y-action-bar-item>

<ng-template #loadingIndicator>
  <c8y-loading
    class="col-xs-12 text-center"
    *ngIf="isLoadingWidgets$ | async"
  ></c8y-loading>
</ng-template>

<ng-container *ngIf="!(isLoadingWidgets$ | async); else loadingIndicator">
  <ng-container *ngIf="resolvedWidgets$ | async as widgetsToDisplay">
    <!-- empty state -->
    <c8y-ui-empty-state
      [icon]="'c8y-device'"
      [title]="'No widgets to display.' | translate"
      *ngIf="widgetsToDisplay?.length === 0"
    >
      <div *ngIf="!settings.isFrozen && onAddWidget.observers.length">
        <p translate>Add widgets to this dashboard.</p>
        <div>
          <button
            class="btn btn-primary m-t-16"
            title="{{ 'Add widget' | translate }}"
            type="button"
            [disabled]="settings.isFrozen || settings.isDisabled"
            (click)="onAddWidget.emit()"
            data-cy="widgets-dashboard--Add-widget"
            translate
          >
            Add widget
          </button>
        </div>
        <p c8y-guide-docs>
          <small
            translate
            ngNonBindable
          >
            Find out more in the
            <a c8y-guide-href="users-guide/cockpit/#dashboards">User guide`KEEP_ORIGINAL`</a>
            .
          </small>
        </p>
      </div>
    </c8y-ui-empty-state>

    <c8y-dashboard
      [columns]="settings.columns"
      (dashboardChange)="onChangeDashboard.emit($event)"
      #dashboard
    >
      <c8y-dashboard-child
        [class]="widget.classes"
        *ngFor="let widget of widgetsToDisplay"
        [x]="widget._x"
        [y]="widget._y"
        [width]="widget._width || settings.defaultWidth"
        [height]="widget._height || settings.defaultHeight"
        [margin]="settings.widgetMargin"
        [isFrozen]="settings.isFrozen || settings.isDisabled"
        [data]="widget"
        [useIntersection]="true"
        (changeStart)="onChangeStart.emit({ widget: widget, source: child, dashboard: dashboard })"
        (changeEnd)="onChangeEnd.emit({ widget: widget, source: child, dashboard: dashboard })"
        #child
      >
        <c8y-dashboard-child-title>
          <span
            data-cy="c8y-dashboard-list--device-widget"
            *ngIf="settings.translateWidgetTitle"
          >
            {{ widget.title | translate }}
          </span>
          <span *ngIf="!settings.translateWidgetTitle">
            {{ widget.title }}
          </span>
        </c8y-dashboard-child-title>
        <c8y-dashboard-child-action *ngIf="onEditWidget.observers.length">
          <button
            title="{{ 'Edit widget' | translate }}"
            type="button"
            data-cy="widgets-dashboard--edit-dashboard"
            (click)="onEditWidget.emit({ widget: widget, source: child, dashboard: dashboard })"
          >
            <i c8yIcon="pencil"></i>
            <span
              class="m-l-4"
              translate
            >
              Edit
            </span>
          </button>
        </c8y-dashboard-child-action>
        <c8y-dashboard-child-action *ngIf="onDeleteWidget.observers.length">
          <button
            title="{{ 'Remove widget' | translate }}"
            type="button"
            data-cy="widgets-dashboard--remove-widget"
            (click)="onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })"
          >
            <i c8yIcon="delete"></i>
            <span
              class="m-l-4"
              translate
            >
              Remove
            </span>
          </button>
        </c8y-dashboard-child-action>

        <c8y-widget-time-context
          *ngIf="
            (widget.config?.displaySettings?.globalTimeContext ||
              widget.config?.displaySettings?.globalRealtimeContext) &&
            widget.config.widgetInstanceGlobalTimeContext
          "
          (dateContextChange)="updateWidgetConfig($event, widget)"
          [canDecouple]="widget.config.canDecoupleGlobalTimeContext"
          [displaySettings]="widget.config.displaySettings"
        ></c8y-widget-time-context>

        <c8y-dynamic-component
          [componentId]="widget.componentId || widget.name"
          [config]="
            widget.templateUrl || widget.widgetComponent
              ? { child: widget, dashboard: contextDashboard, context: context }
              : widget.config
          "
          *ngIf="child.intersected"
          (updateWidgetClasses)="updateWidgetClasses(widget, $event)"
        ></c8y-dynamic-component>
      </c8y-dashboard-child>
    </c8y-dashboard>
  </ng-container>
</ng-container>