<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{title}}</h1>
            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
                Dernier saut enregistré : <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: 'dd/MM/yyyy' }}</span>
            </span>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2">
            <button mat-icon-button [matMenuTriggerFor]="menuCanopyModel" aria-label="Menu Canopy Model">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuCanopyModel="matMenu">
                @for (menuitem of menuItems.getMenuPanel(); track menuitem) {
                <button mat-menu-item>
                    <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                    <span>{{ menuitem.name }}</span>
                </button>
                }
            </mat-menu>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{ subtitle }}</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-4">
            @if (displayCharts) {
            <div class="row">
                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                    <app-pie-chart [headers]="seriesModelHeader" [names]="seriesModelName" [values]="seriesModelValue" [colors]="seriesColor"></app-pie-chart>
                </div>
                <div class="col-xl-3 col-lg-6 col-md-6 col-sm-12">
                    <app-pie-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [colors]="seriesColor"></app-pie-chart>
                </div>
                <div class="col-xl-6 col-lg-12 col-md-12">
                    <!--<app-pie-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [colors]="seriesColor"></app-pie-chart>-->
                    <app-bars-chart [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeRow" [colors]="seriesColor" [legend]="false"></app-bars-chart>
                </div>
            </div>
            }
            <div class="row">
                <div class="col-xl-6 col-lg-12">
                    <mat-divider class="mt-3 mb-0"></mat-divider>
                    <app-history-table [headers]="seriesModelHeader" [names]="seriesModelName" [values]="seriesModelValue" [rows]="seriesModelRow" [colors]="seriesColorClass"></app-history-table>
                </div>
                <div class="col-xl-6 col-lg-12">
                    <mat-divider class="mt-3 mb-0"></mat-divider>
                    <app-history-table [headers]="seriesSizeHeader" [names]="seriesSizeName" [values]="seriesSizeValue" [rows]="seriesSizeRow" [colors]="seriesColorClass"></app-history-table>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
</div>