<div class="workbasket-details">
  <mat-toolbar class="workbasket-details__toolbar">

    <!-- TITLE -->
    <h4 class="workbasket-details__title">
      <span class="workbasket-details__title-name"
            matTooltip="{{workbasket.name}}">{{workbasket.name}}</span>
      <span class="workbasket-details__title-badge"
            matTooltip="{{ badgeMessage$ | async }}"> {{ badgeMessage$ | async }}</span>
    </h4>
    <span class="workbasket-details__spacer"></span>

    <!-- SAVE -->
    <button (click)="onSubmit()" class="workbasket-details__button workbasket-details__save-button"
            mat-button matTooltip="Save changes in current workbasket">
      Save
      <mat-icon class="md-20">save</mat-icon>
    </button>

    <!-- UNDO -->
    <button (click)="onRestore()" class="workbasket-details__button" mat-stroked-button
            matTooltip="Revert changes to previous saved state">
      Undo Changes
      <mat-icon class="workbasket-details__button-aquamarine md-20">restore</mat-icon>
    </button>

    <!-- MENU -->
    <button [matMenuTriggerFor]="buttonMenu" class="action-toolbar__button"
            id="action-toolbar__more-buttons" mat-stroked-button
            matTooltip="More actions">
      <mat-icon>more_vert</mat-icon>
    </button>

    <mat-menu #buttonMenu="matMenu">
      <!-- COPY -->
      <button (click)="onCopy()" class="workbasket-details__dropdown"
              mat-menu-item matTooltip="Copy current values to create new workbasket">
        <mat-icon class="workbasket-details__button-aquamarine">content_copy</mat-icon>
        <span>Copy</span>
      </button>

      <!-- REMOVE AS DISTRIBUTION TARGET -->
      <button (click)="onRemoveAsDistributionTarget()" class="workbasket-details__dropdown"
              mat-menu-item matTooltip="Remove this workbasket as distribution target">
        <mat-icon class="workbasket-details__button-red">remove_circle_outline</mat-icon>
        <span>Remove as distribution target</span>
      </button>

      <!-- DELETE -->
      <button (click)="onRemoveWorkbasket()" class="workbasket-details__dropdown" mat-menu-item
              matTooltip="Delete this workbasket">
        <mat-icon class="workbasket-details__button-red">delete</mat-icon>
        <span>Delete</span>
      </button>

      <!-- CLOSE AND DISCARD -->
      <button (click)="onClose()" class="workbasket-details__dropdown" mat-menu-item
              matTooltip="Close this workbasket and discard all changes"
              style="border-bottom-style: none;">
        <mat-icon>close</mat-icon>
        <span>Close</span>
      </button>
    </mat-menu>
  </mat-toolbar>

  <!-- TABS -->
  <mat-tab-group (selectedIndexChange)="selectComponent($event)"
                 [selectedIndex]="selectedTab$ | async"
                 animationDuration="0ms">
    <mat-tab label="Information">
      <taskana-administration-workbasket-information [action]="action" [workbasket]="workbasket">
      </taskana-administration-workbasket-information>
    </mat-tab>
    <mat-tab label="Access">
      <taskana-administration-workbasket-access-items [expanded]="expanded"
                                                      [workbasket]="workbasket">
      </taskana-administration-workbasket-access-items>
    </mat-tab>
    <mat-tab label="Distribution Targets">
      <taskana-administration-workbasket-distribution-targets *matTabContent>
      </taskana-administration-workbasket-distribution-targets>
    </mat-tab>
  </mat-tab-group>
</div>
