<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">
            <button mat-menu-item *ngFor="let menuitem of menuItems.getMenuPanel()">
                <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                <span>{{ menuitem.name }}</span>
            </button>
        </mat-menu>
    </mat-card-header>
    <hr>
    <mat-card-content>
        <div *ngIf="displayCharts" class="barchart position-relative w-100 my-1">
            <canvas baseChart
                [data]="chartConfig.barChartData"
                [options]="chartConfig.barChartOptions"
                [plugins]="chartConfig.barChartPlugins"
                [legend]="chartConfig.barChartLegend"
                [type]="'bar'">
            </canvas>
        </div>
    </mat-card-content>
    <hr class="mb-0">
    <mat-accordion>
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title>Historique annuel</mat-panel-title>
            </mat-expansion-panel-header>
            <huapp-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColor"></huapp-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>
