<div class="content">
    <mat-card>
        <mat-card-header class="bg-accent rounded-top py-3 px-4">
            <mat-card-title>
                {{ title }} <span class="fs-5" [hidden]="!lastJump.numero">({{ lastJump.numero }})</span>
            </mat-card-title>
            <mat-card-subtitle>
                <span [hidden]="!lastJump.numero" class="me-2 fst-italic">
                    Dernier saut enregistré : # {{ lastJump.numero }} le {{ lastJump.date | date: 'dd/MM/yyyy' }} à {{ lastJump.lieu }}
                </span>
            </mat-card-subtitle>
            <span class="flex-spacer"></span>
            <button mat-icon-button (click)="openAddDialog()" aria-label="Ajouter">
                <mat-icon fontIcon="add_notes"></mat-icon>
            </button>
            <button mat-icon-button [matMenuTriggerFor]="menuJump" aria-label="Menu Jump">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuJump="matMenu">
                <button mat-menu-item (click)="openAddDialog()">
                    <mat-icon fontIcon="add_notes"></mat-icon>
                    <span>Ajouter un saut</span>
                </button>
                <ng-container *ngFor="let menuitem of menuItems.getMenuLogbook()">
                    <button mat-menu-item [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
                        <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                    </button>
                </ng-container>
            </mat-menu>
        </mat-card-header>
        <mat-card-content class="my-4">
            <huapp-jump-table #jumpTable [config]="listConfig" [isUser]="isUser" [showAdd]="canModify" [title]="title">
            </huapp-jump-table>
        </mat-card-content>
    </mat-card>
</div>
