<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]="menuDropzone" aria-label="Menu Dropzone">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuDropzone="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-4">
            @if (displayCharts) {
            <div class="row">
                <div class="col-xl-4 col-lg-5 col-md-6 col-sm-12">
                    <app-pie-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [colors]="seriesColor"></app-pie-chart>
                </div>
                <div class="col-xl-8 col-lg-7 col-md-6 col-sm-12">
                    <app-bars-chart [headers]="seriesHeader" [names]="seriesName" [values]="seriesRow" [colors]="seriesColor" [legend]="false"></app-bars-chart>
                    <!--
                    @if (displayCharts) {
                    <div class="barchart position-relative w-100 my-1">
                        <x-chartist [configuration]="chartBarConfig"></x-chartist>
                    </div>
                    }
                    -->
                </div>
            </div>
            }
            <div class="d-flex">
                <div class="flex-fill py-2">
                    <mat-divider class="mt-3 mb-0"></mat-divider>
                    <app-history-table [headers]="seriesHeader" [names]="seriesName" [values]="seriesValue" [rows]="seriesRow" [colors]="seriesColorClass"></app-history-table>
                </div>
            </div>
        </mat-card-content>
    </mat-card>
    <mat-divider class="my-3"></mat-divider>
    <mat-card>
        <mat-card-header>
            <mat-card-title>Carte des DZ</mat-card-title>
        </mat-card-header>
        <mat-card-content class="mt-4">
            <div class="ratio ratio-21x9">
                <google-map height="100%" width="100%" [center]="center" [zoom]="zoom" [options]="options">
                    <map-kml-layer [url]="kmlUrl" />
                </google-map>
            </div>
        </mat-card-content>
    </mat-card>
</div>