AlexAegis/loreplotter

<mat-sidenav-container class="container">
    <mat-sidenav
        [(mode)]="over"
        (openedChange)="setSidebarOpen($event)"
        [opened]="sidebarOpen$ | async"
        *ngIf="!disabled"
        class="bottom-to-top"
        (closedStart)="onCloseStart()"
    >
        <h2>Objects</h2>
        <div class="grid">
            <button
                [matTooltipShowDelay]="500"
                matTooltip="Click here then to the planet to create an actor. You can also drag this button to the planet and drop it!"
                (click)="storeFacade.toggleActorCreateMode()"
                [dragSource]="actorSource"
                [ngClass]="{ active: storeFacade.isActorCreateMode$ | async }"
                aria-label="Create Actor, drag it to the scene"
                mat-stroked-button
            >
                <fa-icon [icon]="maleIcon" [size]="maleIconSize"></fa-icon> Actor
            </button>
        </div>
        <h2>Actors {{ (currentLoreActors$ | async)?.length }}</h2>
        <div class="grid">
            <button
                aria-label="Select Actor"
                mat-stroked-button
                *ngFor="let actor of currentLoreActors$ | async"
                (click)="select($event, actor)"
                [matTooltip]="(actorService.accumulatorOf(actor) | async)?.accumulator.name.value + ' (' + actor?._states?.length + ')'"
                [ngStyle]="{ backgroundColor: (actorService.accumulatorOf(actor) | async)?.accumulator.color.value }"
            >
                <fa-icon [icon]="maleIcon" [size]="maleIconSize"></fa-icon>
                {{ (actorService.accumulatorOf(actor) | async)?.accumulator.name.value }} ({{
                    actor?._states?.length
                }})
            </button>
        </div>
        <div class="tools grid">
            <button
                (click)="storeFacade.toggleDebugMode()"
                [ngClass]="{ active: storeFacade.isDebugMode$ | async }"
                aria-label="Set Debug Mode"
                mat-stroked-button
            >
                Debug Mode
            </button>

            <button (click)="storeFacade.resetFrame()" aria-label="Reset Frame" mat-stroked-button>
                Reset Frame
            </button>
        </div>
    </mat-sidenav>
    <mat-sidenav-content>
        <ng-content></ng-content>
    </mat-sidenav-content>
</mat-sidenav-container>