<!--
  ~ Copyright (C) 2018 Robert Bosch GmbH Copyright (C) 2018 Robert Bosch Manufacturing Solutions GmbH, Germany. All rights reserved.
  -->

<div class="grid-container">
  <ng-container *ngIf="getWidgets().length > 0 && !showLoader">
    <gridster
      [options]="gridsterOptions"
      #gridsterEl
      id="gridster-grid1"
      [ngClass]="{
        'edit-mode-active': editModeActive$ | async,
        'has-filter-bar': pinboardFilterBarComponents.length > 0
      }"
    >
      <ng-content></ng-content>
      <gridster-item *ngFor="let widget of getWidgets()" [item]="widget.gridsterItem">
        <bci-widget
          [widget]="widget"
          [readOnly]="readOnly"
          [draggable]="gridsterOptions.draggable.enabled ?? false"
          (remove)="removeWidget($event)"
          (openEdit)="widgetEdit.emit($event)"
          (sizeChange)="handleWidgetSizeChange($event)"
          (linkToFilter)="linkToFilter($event)"
        >
        </bci-widget>
      </gridster-item>
    </gridster>
  </ng-container>

  <ng-container *ngIf="getWidgets().length === 0 && widgetsLoaded && !showLoader">
    <div class="empty-message-container">
      <span data-test="webcore.pinboard.grid-empty-message.span" class="empty-message">
        {{ pinboardI18n.emptyDashboard }}
      </span>
    </div>
  </ng-container>
  <bci-activity-indicator [showLoader]="showLoader"></bci-activity-indicator>
</div>
