<mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
    <div class="toolbar-left">
        <!-- Nav menu -->
        <button mat-icon-button *ngIf="vp.isMobile && !showBackButton && !editMode" (click)="clickHamburgerMenu()">
            <mat-icon>menu</mat-icon>
        </button>

        <!-- Exit / Back button -->
        <button mat-icon-button *ngIf="showBackButton && !editMode" (click)="onBackButton()">
            <mat-icon>arrow_back</mat-icon>
        </button>

        <!-- Cancel edit button -->
        <button mat-icon-button *ngIf="editMode" (click)="isCancelEditUsed ? sendCancelEditEvent() : sendMainEvent()">
            <mat-icon>close</mat-icon>
        </button>

        <div class="toolbar-left-text" *ngIf="!multiSelectMode">
            <!-- Title slot -->
            <ng-content select=".title-slot"></ng-content>
        </div>
    </div>

    <!-- centered information slot -->
    <div *ngIf="!multiSelectMode" class="spacer"></div>
    <div class="toolbar-centered" *ngIf="multiSelectMode">
        <ng-content select=".central-info-slot"></ng-content>
    </div>
    <div class="spacer"></div>

    <!-- Button to open the global search -->
    <button *ngIf="!editMode && isSearchEnabled" mat-icon-button (click)="openSearch()">
        <mat-icon>search</mat-icon>
    </button>

    <div class="toolbar-right">
        <!-- Extra controls slot -->
        <ng-content select=".extra-controls-slot"></ng-content>

        <!-- Main action button - desktop -->
        <button
            mat-icon-button
            *ngIf="hasMainButton && !editMode && !vp.isMobile && !multiSelectMode"
            [disabled]="!isMainButtonEnabled"
            (click)="sendMainEvent()"
            matTooltip="{{ mainActionTooltip | translate }}"
        >
            <mat-icon>{{ mainButtonIcon }}</mat-icon>
        </button>

        <!-- Save button -->
        <button mat-button *ngIf="editMode" [disabled]="!isSaveButtonEnabled" (click)="save()">
            <strong class="upper">{{ saveText | translate }}</strong>
        </button>

        <!-- Menu button slot -->
        <ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
    </div>
</mat-toolbar>

<!-- Main action button - mobile -->

<button
    mat-fab
    class="head-button"
    *ngIf="hasMainButton && !editMode && vp.isMobile && !multiSelectMode"
    [disabled]="!isMainButtonEnabled"
    (click)="sendMainEvent()"
    matTooltip="{{ mainActionTooltip | translate }}"
>
    <mat-icon *ngIf="mainButtonIcon === 'add_circle'">
        add
    </mat-icon>
    <mat-icon *ngIf="mainButtonIcon !== 'add_circle'">
        {{ mainButtonIcon }}
    </mat-icon>
</button>
