<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]="menuDropzoneBar" aria-label="Menu Dropzone Bar">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuDropzoneBar="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-bars-chart
                [names]="seriesName"
                [values]="seriesRow"
                [headers]="seriesHeader"
                [colors]="seriesColor"
            ></app-bars-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>
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
