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

<div id="widget" [style.cursor]="!!editModeActiveFor || !draggable ? 'default' : 'move'">
  <div class="backdrop" *ngIf="!!editModeActiveFor && editModeActiveFor !== widget"></div>
  <!-- Title Toolbar  -->
  <div id="toolbar" [ngClass]="{ burgerMenu: !widget.showWidgetTitle }">
    <mat-toolbar>
      <span data-test="webcore.pinboard.widget.title.span" class="title" *ngIf="widget.showWidgetTitle">{{
        widget.title
      }}</span>
      <span data-test="webcore.pinboard.widget.can-link-to-filter.span" *ngIf="widget.widgetDefinition.canLinkToFilter">
        <mat-icon
          fontIcon="{{ widget.isLinkedToFilter ? 'bosch-ic-link' : 'bosch-ic-link-broken' }}"
          [matTooltip]="widget.isLinkedToFilter ? pinboardI18n.respondToFilter : pinboardI18n.dontRespondToFilter"
        ></mat-icon>
      </span>
      <span
        data-test="webcore.pinboard.widget.edit-menu.span"
        *ngIf="!editModeActiveFor && showBurgerMenu"
        (mousedown)="$event.stopPropagation()"
        (touchstart)="$event.stopPropagation()"
      >
        <mat-icon
          data-test="webcore.pinboard.widget.edit-menu.button"
          class="burger-menu-icon"
          [matMenuTriggerFor]="menu"
          fontIcon="bosch-ic-options"
        ></mat-icon>
      </span>
    </mat-toolbar>
  </div>
  <!-- Burger Button Menu -->
  <mat-menu #menu="matMenu" [xPosition]="'after'">
    <button
      data-test="webcore.pinboard.widget.menu.configure-widget.button"
      mat-menu-item
      (click)="editWidget()"
      *ngIf="widget.widgetDefinition.canEdit"
      class="menu-button"
    >
      <span data-test="webcore.pinboard.widget.menu.edit-text.span" class="burger-menu-text">{{
        pinboardI18n.configureWidget
      }}</span>
    </button>
    <button
      data-test="webcore.pinboard.widget.menu.remove-widget.span"
      mat-menu-item
      (click)="removeWidget()"
      *ngIf="widget.widgetDefinition.canRemove"
      class="menu-button"
    >
      <span data-test="webcore.pinboard.widget.menu.remove-text.span" class="burger-menu-text">{{
        pinboardI18n.deleteWidget
      }}</span>
    </button>
    <mat-divider
      *ngIf="widget.widgetDefinition.canLinkToFilter && widget.widgetDefinition.hasLinkToFilterToggle"
    ></mat-divider>
    <button
      mat-menu-item
      (click)="toggleLinkToFilter()"
      *ngIf="widget.widgetDefinition.canLinkToFilter && widget.widgetDefinition.hasLinkToFilterToggle"
      class="menu-button"
    >
      <i
        class="bosch-ic-normal bosch-ic-checkmark"
        [class.hidden]="!widget.isLinkedToFilter"
        data-test="webcore.pinboard.widget.menu.can-link-to-filter.toggle.button"
      ></i>
      <span data-test="webcore.pinboard.widget.menu.can-link-to-filter-text.span" class="burger-menu-text">{{
        pinboardI18n.respondToFilter
      }}</span>
    </button>
  </mat-menu>
  <!-- Content -->
  <div
    data-test="webcore.pinboard.widget.content.div"
    class="gridster-item-content"
    [ngClass]="{ 'block-clicks': draggable }"
  >
    <ng-container #contentContainer></ng-container>
  </div>
</div>
