<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{ title }}</h1>
            <span [hidden]="!lastJump.numero" class="me-2 fs-6">
                Dernier saut enregistré :
                <span class="fs-5 mx-1 text-primary">{{ lastJump.numero }}<sup>ème</sup></span> à
                <span class="fs-5 mx-1 text-primary">{{ lastJump.lieu }}</span> le
                <span class="fs-5 mx-1 text-primary">{{ lastJump.date | date: "dd/MM/yyyy" }}</span>
            </span>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2">
            <button mat-icon-button [matMenuTriggerFor]="menuJumps" aria-label="Menu sauts">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuJumps="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>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    <mat-card>
        <mat-card-header>
            <mat-card-title>{{ subtitle }}</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-2">
            @if (displayCharts) {
                <div class="row">
                    <div class="col-xxl-6 col-xs-12">
                        <app-linearea-chart
                            [headers]="seriesHeader"
                            [names]="seriesName"
                            [values]="seriesRow"
                            [colors]="seriesColor"
                        ></app-linearea-chart>
                    </div>
                    <div class="col-xxl-6 col-xs-12">
                        <app-bars-chart
                            [headers]="seriesHeader"
                            [names]="seriesName"
                            [values]="seriesRow"
                            [colors]="seriesColor"
                            [legend]="true"
                        ></app-bars-chart>
                    </div>
                </div>
            }
            <div class="row">
                <div class="col-xs-12">
                    <mat-divider class="mt-3 mb-0"></mat-divider>
                    <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>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
    <mat-card class="bannercard">
        <mat-card-header>
            <mat-card-title>Types de sauts</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-2">
            @if (displayCharts) {
                <div class="row">
                    <div class="col-xs-12">
                        <app-line-chart
                            [headers]="seriesTypesHeader"
                            [names]="seriesTypesName"
                            [values]="seriesTypesRowCumulated"
                            [colors]="seriesTypesColor"
                            [legend]="true"
                            [hideZero]="true"
                        ></app-line-chart>
                    </div>
                </div>
                <mat-divider class="mt-2 mb-3"></mat-divider>
                <div class="row">
                    @for (item of getCategories(); track $index) {
                        <div class="col-lg-2 col-sm-4 col-xs-6">
                            <app-circle-chart
                                [headers]="seriesHeader"
                                [names]="seriesName"
                                [values]="[item.count, lastJump.numero - item.count]"
                                [color]="$index"
                                [label]="item.categorie"
                            ></app-circle-chart>
                        </div>
                    }
                    @for (item of getModules(); track $index) {
                        <div class="col-lg-2 col-sm-4 col-xs-6">
                            <app-circle-chart
                                [headers]="seriesHeader"
                                [names]="seriesName"
                                [values]="[item.count, lastJump.numero - item.count]"
                                [color]="getModuleColor($index)"
                                [label]="item.module"
                            ></app-circle-chart>
                        </div>
                    }
                </div>
                <mat-divider class="my-3"></mat-divider>
                <!--
            <div class="row">
                <div class="col-xxl-6 col-xs-12">
                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRow" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
                </div>
                <div class="col-xxl-6 col-xs-12">
                    <app-line-chart [headers]="seriesTypesHeader" [names]="seriesTypesName" [values]="seriesTypesRowCumulated" [colors]="seriesTypesColor" [legend]="true"></app-line-chart>
                </div>
            </div>
            -->
            }
        </mat-card-content>
    </mat-card>
</div>
