<mat-card>
    <mat-card-header>
        <mat-card-title>{{ title }}</mat-card-title>
        <mat-card-subtitle>{{ subtitle }} de {{ min }} à {{ max }}</mat-card-subtitle>
        <span class="flex-spacer"></span>
        <button mat-icon-button [matMenuTriggerFor]="menuJumpBar" aria-label="Menu Dropzone Bar">
            <mat-icon fontIcon="more_vert"></mat-icon>
        </button>
        <mat-menu #menuJumpBar="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>
            <table class="table table-striped table-dark table-hover">
                <thead>
                    <tr>
                        <th></th>
                        @for (name of seriesHeader; track name) {
                            <th class="text-end">{{ name }}</th>
                        }
                        <th class="text-end">Total</th>
                    </tr>
                </thead>
                <tbody>
                    @for (values of seriesRow; track $index; let i = $index) {
                        <tr>
                            <th class="{{ seriesColorClass[i] }} text-end">● {{ seriesName[i] }}</th>
                            @for (value of values; track $index) {
                                <td class="font-monospace text-end">
                                    @if (value) {
                                        <span class="pr-1">{{ value }}</span>
                                    } @else {
                                        <span class="text-empty pr-1">{{ value }}</span>
                                    }
                                </td>
                            }
                            <th class="{{ seriesColorClass[i] }} font-monospace text-end">{{ seriesRowTotal[i] }}</th>
                        </tr>
                    }
                </tbody>
                <tfoot>
                    <tr>
                        <th class="text-end">Total</th>
                        @for (value of seriesColTotal; track $index) {
                            <th class="font-monospace text-end">
                                @if (value) {
                                    <span class="pr-1">{{ value }}</span>
                                } @else {
                                    <span class="text-empty pr-1">{{ value }}</span>
                                }
                            </th>
                        }
                        <th class="font-monospace text-end">{{ grandTotal }}</th>
                    </tr>
                    <tr>
                        <th class="text-end">Moyenne</th>
                        @for (value of seriesRowAvg; track $index) {
                            <th class="font-monospace text-end">
                                @if (value) {
                                    <span class="pr-1">{{ value | number: "1.0-1" }}</span>
                                } @else {
                                    <span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
                                }
                            </th>
                        }
                        <th class="font-monospace text-end">{{ grandAvg | number: "1.0-1" }}</th>
                    </tr>
                    <tr>
                        <th class="text-end">Moyenne <small>3 dernières années</small></th>
                        @for (value of seriesRowAvgLastYears; track $index) {
                            <th class="font-monospace text-end">
                                @if (value) {
                                    <span class="pr-1">{{ value | number: "1.0-1" }}</span>
                                } @else {
                                    <span class="text-empty pr-1">{{ value | number: "1.0-1" }}</span>
                                }
                            </th>
                        }
                        <th class="font-monospace text-end">{{ grandAvgLastYears | number: "1.0-1" }}</th>
                    </tr>
                </tfoot>
            </table>
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
