<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 (click)="openAddDialog()" aria-label="Ajouter">
                <mat-icon fontIcon="add_notes"></mat-icon>
            </button>
            <button mat-icon-button [matMenuTriggerFor]="menuJump" aria-label="Menu Jump">
                <mat-icon fontIcon="more_vert"></mat-icon>
            </button>
            <mat-menu #menuJump="matMenu">
                <button mat-menu-item (click)="openAddDialog()">
                    <mat-icon fontIcon="add_notes"></mat-icon>
                    <span>Ajouter un saut</span>
                </button>
                @for (menuitem of menuItems.getMenuLogbook(); track menuitem) {
                    @if (menuitem.type === 'link') {
                    <button mat-menu-item [routerLink]="['/', menuitem.state]">
                        <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                    </button>
                    }
                }
            </mat-menu>
        </div>
    </div>
    <mat-divider class="my-3"></mat-divider>
    @if (jumpsToHundred() <= 20) {
    <div class="d-flex pb-2 pe-2">
        <span class="flex-spacer"></span>
        <mat-icon fontIcon="warning" color="teal"></mat-icon>
        <div class="text-end text-teal align-self-center ms-2">
            {{ lastJump.numero + jumpsToHundred() }}<sup>ème</sup> à venir dans {{ jumpsToHundred() }}
            {{ jumpsToHundred() > 1 ? 'sauts' : 'saut' }}
        </div>
    </div>
    }
    <mat-card>
        <mat-card-header class="p-0">
            <mat-expansion-panel class="w-100">
                <mat-expansion-panel-header class="bg-accent">
                    <mat-panel-title>Filtrer les sauts</mat-panel-title>
                    @if (jumpsCount < lastJump.numero) {
                    <mat-panel-description>
                        {{ jumpsCount }} {{ jumpsCount > 1 ? 'sauts' : 'saut' }} sur {{ lastJump.numero }} correspondent à la recherche
                    </mat-panel-description>
                    }
                </mat-expansion-panel-header>
                <div class="d-flex mt-3 mb-0">
                    <div class="flex-fill">
                        <div class="label-container d-flex justify-content-between mx-2">
                            <label for="yearRange">Année du saut</label>
                            <label for="yearRange">de <span class="fw-bold">{{listConfig.filters.yearRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.yearRangeEnd}}</span></label>
                        </div>
                        <mat-slider [min]="rangesMinMax.year.start" [max]="rangesMinMax.year.end" step="1" discrete>
                            <input id="yearRange" matSliderStartThumb [(ngModel)]="listConfig.filters.yearRangeStart">
                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.yearRangeEnd">
                        </mat-slider>
                    </div>
                    <div class="flex-fill">
                        <div class="label-container d-flex justify-content-between mx-2">
                            <label for="numeroRange">Numéro du saut</label>
                            <label for="numeroRange">de <span class="fw-bold">{{listConfig.filters.numeroRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.numeroRangeEnd}}</span></label>
                        </div>
                        <mat-slider [min]="rangesMinMax.numero.start" [max]="rangesMinMax.numero.end" step="1" discrete>
                            <input id="numeroRange" matSliderStartThumb [(ngModel)]="listConfig.filters.numeroRangeStart">
                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.numeroRangeEnd">
                        </mat-slider>
                    </div>
                    <div class="flex-fill">
                        <div class="label-container d-flex justify-content-between mx-2">
                            <label for="tailleRange">Taille de la voile</label>
                            <label for="tailleRange">de <span class="fw-bold">{{listConfig.filters.tailleRangeStart}}</span> ft<sup>2</sup> à <span class="fw-bold">{{listConfig.filters.tailleRangeEnd}}</span> ft<sup>2</sup></label>
                        </div>
                        <mat-slider [min]="rangesMinMax.taille.start" [max]="rangesMinMax.taille.end" step="1" discrete>
                            <input id="tailleRange" matSliderStartThumb [(ngModel)]="listConfig.filters.tailleRangeStart">
                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.tailleRangeEnd">
                        </mat-slider>
                    </div>
                    <div class="flex-fill">
                        <div class="label-container d-flex justify-content-between mx-2">
                            <label for="participantsRange">Taille du groupe</label>
                            <label for="participantsRange">de <span class="fw-bold">{{listConfig.filters.participantsRangeStart}}</span> à <span class="fw-bold">{{listConfig.filters.participantsRangeEnd}}</span></label>
                        </div>
                        <mat-slider [min]="rangesMinMax.participants.start" [max]="rangesMinMax.participants.end" step="1" discrete>
                            <input id="participantsRange" matSliderStartThumb [(ngModel)]="listConfig.filters.participantsRangeStart">
                            <input matSliderEndThumb [(ngModel)]="listConfig.filters.participantsRangeEnd">
                        </mat-slider>
                    </div>
                    <span class="flex-spacer"></span>
                </div>
            </mat-expansion-panel>
        </mat-card-header>
        <mat-card-content class="mt-2">
            <app-jump-table (countChange)="setTotalResults($event)" #jumpTable [config]="listConfig" [isUser]="isUser" [showAdd]="canModify" [title]="title">
            </app-jump-table>
        </mat-card-content>
    </mat-card>
</div>