AlexAegis/loreplotter

<div *ngIf="selectedActorAccumulatorAtCursor$ | async as acc" [@visibility]="visibility" class="popup">
    <div class="navigation">
        <button (click)="cursorEaseTo(acc.firstEvent?.k.unix)" [disabled]="!acc.firstEvent" mat-stroked-button>
            <fa-icon [icon]="firstIcon"></fa-icon>
        </button>
        <button (click)="cursorEaseTo(acc.previousEvent?.k.unix)" [disabled]="!acc.previousEvent" mat-stroked-button>
            <fa-icon [icon]="previousIcon" [size]="'lg'"></fa-icon>
        </button>
        <button (click)="cursorEaseTo(acc.nextEvent?.k.unix)" [disabled]="!acc.nextEvent" mat-stroked-button>
            <fa-icon [icon]="nextIcon" [size]="'lg'"></fa-icon>
        </button>
        <button (click)="cursorEaseTo(acc.lastEvent?.k.unix)" [disabled]="!acc.lastEvent" mat-stroked-button>
            <fa-icon [icon]="lastIcon"></fa-icon>
        </button>
    </div>

    <div *ngIf="acc?.accumulator.name as name" class="accumulated name">
        <h1>{{ name.value }}</h1>
        <button (click)="cursorEaseTo(name.appearedIn?.k.unix)" *ngIf="name.appearedIn" mat-stroked-button>
            {{ name.appearedIn?.k.unix | amFromUnix | amDateFormat: 'YYYY-MM-DD HH:mm' }}
        </button>
    </div>

    <div *ngIf="acc?.accumulator.maxSpeed as maxSpeed" class="accumulated">
        <span> Current max speed: {{ maxSpeed.value }} km/h </span>
        <button (click)="cursorEaseTo(maxSpeed.appearedIn?.k.unix)" *ngIf="maxSpeed.appearedIn" mat-stroked-button>
            {{ maxSpeed.appearedIn?.k.unix | amFromUnix | amDateFormat: 'YYYY-MM-DD HH:mm' }}
        </button>
    </div>
    <hr class="divider" />
    <div class="propertiesContainer">
        <ng-scrollbar>
            <div *ngFor="let entry of nonEmpty(acc?.accumulator.properties)" class="accumulated">
                <span> {{ entry?.value.key }}: {{ entry?.value.value }} </span>
                <button (click)="cursorEaseTo(entry?.appearedIn?.k.unix)" *ngIf="entry?.appearedIn" mat-stroked-button>
                    {{ entry?.appearedIn?.k.unix | amFromUnix | amDateFormat: 'YYYY-MM-DD HH:mm' }}
                </button>
            </div>
        </ng-scrollbar>
    </div>

    <button (click)="edit($event)" aria-label="Edit Actor" class="popupEditButton" mat-stroked-button>Edit</button>
</div>