<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
    title="{{ 'Add widget' | translate }}"
    class="btn btn-link"
    [disabled]="settings.isFrozen || settings.isDisabled"
    (click)="onAddWidget.emit()"
  >
    <i c8yIcon="plus-circle"></i>
    {{ 'Add widget' | translate }}
  </button>
</c8y-action-bar-item>

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

<c8y-action-bar-item [placement]="'right'" *ngIf="settings.allowFullscreen">
  <button title="{{ 'Full screen' | translate }}" class="btn btn-link" (click)="toggleFullscreen()">
    <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
    title="{{ 'Lock/unlock this dashboard' | translate }}"
    class="btn btn-default"
    [ngClass]="{ active: settings.isFrozen }"
    (click)="onFreeze.emit(settings)"
    [disabled]="settings.isDisabled"
    uib-btn-checkbox
  >
    <i [c8yIcon]="settings.isFrozen ? 'lock' : 'unlock'"></i>
  </button>
</c8y-action-bar-item>

<c8y-action-bar-item [placement]="'more'" [priority]="-2000" *ngIf="settings.canCopy">
  <button title="{{ 'Copy dashboard' | translate }}" (click)="onCopyDashboard.emit()">
    <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 }}"
    (click)="onDeleteDashboard.emit()"
    [disabled]="settings.isFrozen || settings.isDisabled"
  >
    <i c8yIcon="trash"></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 -->
    <div class="c8y-empty-state text-center" *ngIf="widgetsToDisplay?.length === 0">
      <h1 class="c8y-icon c8y-icon-device c8y-icon-duocolor"></h1>
      <h3 translate>No widgets to display.</h3>
      <div *ngIf="!settings.isFrozen && onAddWidget.observers.length">
        <p translate>Add widgets to this dashboard.</p>
        <div>
          <button
            title="{{ 'Add widget' | translate }}"
            [disabled]="settings.isFrozen || settings.isDisabled"
            (click)="onAddWidget.emit()"
            class="btn btn-primary"
            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>
    </div>

    <c8y-dashboard
      (dashboardChange)="onChangeDashboard.emit($event)"
      #dashboard
    >
      <c8y-dashboard-child
        *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"
        [class]="widget.classes"
        [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 *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 }}"
            (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 }}"
            (click)="onDeleteWidget.emit({ widget: widget, source: child, dashboard: dashboard })"
          >
            <i c8yIcon="trash"></i>
            <span class="m-l-4" translate>Remove</span>
          </button>
        </c8y-dashboard-child-action>

        <c8y-widget-time-context
          *ngIf="widget.config?.displaySettings?.globalTimeContext"
          (dateContextChange)="updateWidgetConfig({ date: $event }, widget)"
        ></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>