<mat-card>
    <mat-card-header>
        <mat-card-title>{{ title }}</mat-card-title>
        <mat-card-subtitle>{{ subtitle }}</mat-card-subtitle>
        <span class="flex-spacer"></span>
        <button mat-icon-button [matMenuTriggerFor]="menuAeronefBar" aria-label="Menu Aeronef Bar">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuAeronefBar="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>
    </mat-card-header>
    <mat-divider class="my-3"></mat-divider>
    <mat-card-content>
        @if (displayCharts) {
        <app-bar-horizontal-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor" label="Nombre total de sauts" [legend]="false"></app-bar-horizontal-chart>
        }
    </mat-card-content>
    <mat-divider class="mt-3 mb-0"></mat-divider>
    <mat-accordion>
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>Historique annuel</mat-panel-title>
            </mat-expansion-panel-header>
            <app-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColorClass"></app-history-table>
            <!--
            <div fxLayout="row wrap">
                <div *ngFor='let name of seriesName; let i=index' fxFlex.gt-lg="33" fxFlex.gt-md="50" fxFlex.gt-xs="20" fxFlex="100">
                    <h6 class="{{seriesColor[i]}} m-0">
                    <i class="mdi mdi-checkbox-blank-circle font-10 m-r-10 "></i>{{name}} - {{seriesValue[i]}}
                    </h6>
                </div>
            </div>
            -->
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
