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

<ng-container *ngIf="!!locationMapService.locationBeingEdited">
  <mat-button-toggle-group [(ngModel)]="locationInteraction.interactionMode" aria-label="Tool" name="tool">
    <mat-button-toggle [title]="settings.move.title" value="move">
      <mat-icon [fontIcon]="settings.move.icon"></mat-icon>
      <span *ngIf="settings.move.badge" class="button-badge">{{settings.move.badge}}</span>
    </mat-button-toggle>
    <mat-button-toggle [title]="settings.modify.title" value="modify">
      <mat-icon [fontIcon]="settings.modify.icon"></mat-icon>
      <span *ngIf="settings.modify.badge" class="button-badge">{{settings.modify.badge}}</span>
    </mat-button-toggle>

    <div class="toolbar-spacer"></div>

    <!-- add / remove position; using hidden instead of ngIf due to toggle-group issues -->
    <mat-button-toggle [hidden]="!canSetPosition" [title]="settings.addPosition.title" value="add-position">
      <mat-icon [fontIcon]="settings.addPosition.icon"></mat-icon>
      <span *ngIf="settings.addPosition.badge" class="button-badge">{{settings.addPosition.badge}}</span>
    </mat-button-toggle>
    <mat-button-toggle [hidden]="!canRemovePosition" [title]="settings.removePosition.title" value="remove-position">
      <mat-icon [fontIcon]="settings.removePosition.icon"></mat-icon>
      <span *ngIf="settings.removePosition.badge" class="button-badge">{{settings.removePosition.badge}}</span>
    </mat-button-toggle>

    <!-- add / remove position; using hidden instead of ngIf due to toggle-group issues -->
    <mat-button-toggle [hidden]="!canSetBoundary" [title]="settings.addBoundary.title" value="add-boundary">
      <mat-icon [fontIcon]="settings.addBoundary.icon"></mat-icon>
      <span *ngIf="settings.addBoundary.badge" class="button-badge">{{settings.addBoundary.badge}}</span>
    </mat-button-toggle>
    <mat-button-toggle [hidden]="!canRemoveBoundary" [title]="settings.removeBoundary.title" value="remove-boundary">
      <mat-icon [fontIcon]="settings.removeBoundary.icon"></mat-icon>
      <span *ngIf="settings.removeBoundary.badge" class="button-badge">{{settings.removeBoundary.badge}}</span>
    </mat-button-toggle>
  </mat-button-toggle-group>
</ng-container>
