<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>

<!-- empty state -->
<div class="c8y-empty-state text-center" *ngIf="!settings.isLoading && widgets?.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>
<!-- /.empty settings -->

<div class="col-xs-12 text-center" *ngIf="settings.isLoading">
  <div class="spinner p-relative">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
  </div>
</div>

<c8y-dashboard
  (dashboardChange)="onChangeDashboard.emit($event)"
  #dashboard
  *ngIf="!settings.isLoading"
>
  <c8y-dashboard-child
    *ngFor="let widget of widgets"
    [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-dynamic-component
      [componentId]="widget.componentId || widget.name"
      [config]="
        widget.templateUrl || widget.widgetComponent
          ? { child: widget, dashboard: contextDashboard, context: context }
          : widget.config
      "
      *ngIf="child.intersected"
    ></c8y-dynamic-component>
  </c8y-dashboard-child>
</c8y-dashboard>