<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">
            <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 class="text-center mb-3">
            <ul class="list-inline my-0">
                <li *ngFor='let name of seriesName; let i=index' class="list-inline-item me-lg-3 me-sm-2">
                    <span class="{{seriesColor[i]}} fs-6 m-0">
                        ● {{name}}
                    </span>
                </li>
            </ul>
        </div>
        -->
        <div *ngIf="displayCharts" class="barchart position-relative w-100 my-1">
            <x-chartist [configuration]="barChartJumps"></x-chartist>
        </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>
            <table class="table table-striped table-dark table-hover">
                <thead>
                    <tr>
                        <th></th>
                        <th *ngFor='let name of seriesHeader; let i=index' class="text-end"> {{ name }} </th>
                        <th class="text-end">Total</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor='let values of seriesRow; let i=index'>
                        <th class="{{seriesColor[i]}} text-end"> ● {{ seriesName[i] }} </th>
                        <td *ngFor='let value of values; let i=index' class="font-monospace text-end">
                            <span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
                            <ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
                        </td>
                        <th class="font-monospace text-end">{{ seriesRowTotal[i] }}</th>
                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th class="text-end">Total</th>
                        <th *ngFor='let value of seriesColTotal; let i=index' class="font-monospace text-end">
                            <span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
                            <ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
                        </th>
                        <th class="font-monospace text-end">{{ grandTotal }}</th>
                    </tr>
                    <tr>
                        <th class="text-end">Moyenne</th>
                        <th *ngFor='let value of seriesRowAvg; let i=index' class="font-monospace text-end">
                            <span *ngIf="value; else elseBlock" class="pr-1">{{ value }}</span>
                            <ng-template #elseBlock><span class="text-empty pr-1">{{ value }}</span></ng-template>
                        </th>
                        <th class="font-monospace text-end">{{ grandAvg }}</th>
                    </tr>
                </tfoot>
            </table>
        </mat-expansion-panel>
    </mat-accordion>
</mat-card>
