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

<div class="pinboard-container">
  <mat-tab-group
    data-test="webcore.pinboard.dashboards.mat-tab"
    [selectedIndex]="activeIndex"
    [ngClass]="dashboards.length > 1 ? '' : 'hide-tab'"
  >
    <mat-tab *ngFor="let dashboard of dashboards">
      <ng-template mat-tab-label>
        <mat-icon *ngIf="dashboardInEditMode(dashboard)" class="tab-icon" fontIcon="Bosch-Ic-edit"></mat-icon>
        {{ dashboard.label }}
      </ng-template>
    </mat-tab>
  </mat-tab-group>
  <div class="pinboard-content">
    <ng-content></ng-content>
  </div>
  <button
    bciPrimaryButton
    mat-icon-button
    class="widget-catalog-open"
    *ngIf="canAdd && !widgetSettingsComponent.settingsOpen && !editMode"
    (click)="startEditMode()"
    data-test="webcore.pinboard.edit-mode.button"
  >
    <mat-icon fontIcon="bosch-ic-edit"></mat-icon>
  </button>

  <div *ngIf="editMode" class="pinboard-edit-bar">
    <button data-test="webcore.pinboard.edit-mode.add-widget.button" class="button-secondary" (click)="openCatalog()">
      <mat-icon fontIcon="bosch-ic-add"></mat-icon>
      {{ pinboardI18n.addWidget }}
    </button>
    <button
      [disabled]="!activeDashboardChanged()"
      data-test="webcore.pinboard.edit-mode.save.button"
      class="button-primary"
      (click)="saveEditMode()"
    >
      {{ pinboardI18n.save }}
    </button>
    <button data-test="webcore.pinboard.edit-mode.cancel.button" class="button-secondary" (click)="cancelEditMode()">
      {{ pinboardI18n.cancel }}
    </button>
  </div>
</div>
