<div @flyInOut>
    <div class="d-flex">
        <div class="flex-fill">
            <h1 class="mb-1">{{title}}</h1>
            <span class="me-2 fs-6"><span class="fs-5 mx-1">DT48</span> - 08 février 2024</span>
        </div>
        <span class="flex-spacer"></span>
        <div class="align-self-center me-2">
            <button mat-icon-button [matMenuTriggerFor]="menuCalculator" aria-label="Menu Calculator">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menuCalculator="matMenu">
                @for (menuitem of menuItems.getMenuCalculator(); 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>
    <mat-card class="calculator">
        <mat-card-header class="bg-warn rounded-top pt-1 pb-2 px-2">
            <form #searchFormData="ngForm" class="inputs-form">
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
                    <mat-label>Nombre de sauts</mat-label>
                    <input matInput [(ngModel)]="inputs.jumps" (change)="refresh()" type="number" min="0" max="2000"
                        step="1" name="jumps">
                </mat-form-field>
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
                    <mat-label>Poids nu</mat-label>
                    <input matInput [(ngModel)]="inputs.weight" (change)="refresh()" type="number" min="30"
                        max="110" name="weight">
                </mat-form-field>
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
                    <mat-label>Poids équipement</mat-label>
                    <input matInput [(ngModel)]="inputs.gear" (change)="refresh()" type="number" min="0"
                        name="gear">
                </mat-form-field>
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic" color="accent">
                    <mat-label>Taille actuelle</mat-label>
                    <input matInput [(ngModel)]="inputs.current" (change)="refresh()" type="number" min="0"
                        name="current" id="current" placeholder="Taille actuelle">
                </mat-form-field>
            </form>
            <span class="flex-spacer"></span>
            <div class="flex-fill"></div>
        </mat-card-header>
        <mat-card-content class="my-4">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-12">
                    <table class="table table-striped table-dark table-hover mat-elevation-z2">
                        <thead>
                            <tr class="warn">
                                <th class="text-nowrap pe-4"></th>
                                <th class="text-nowrap">Taille actuelle</th>
                                <th class="text-nowrap">Taille min</th>
                                <th class="text-nowrap">Taille min -11%</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Taille de voile en ft<sup>2</sup></th>
                                <td class="font-monospace text-{{ info.state.color }}"> ●
                                    {{ info.sizesFeet.current }} </td>
                                <td class="font-monospace text-success"> ● {{ info.sizesFeet.min }} </td>
                                <td class="font-monospace text-warning"> ● {{ info.sizesFeet.min11 }} </td>
                            </tr>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Charge alaire</th>
                                <td class="font-monospace">{{ info.charges.current | number : '1.2-3' }}</td>
                                <td class="font-monospace">{{ info.charges.min | number : '1.2-3' }}</td>
                                <td class="font-monospace">{{ info.charges.min11 | number : '1.2-3' }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Taille de voile en m<sup>2</sup></th>
                                <td class="font-monospace">{{ info.sizesMeter.current | number : '1.2-3' }}</td>
                                <td class="font-monospace">{{ info.sizesMeter.min | number : '1.2-3' }}</td>
                                <td class="font-monospace">{{ info.sizesMeter.min11 | number : '1.2-3' }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Coefficient kilo/livres</th>
                                <td colspan="3" class="font-monospace text-start">{{ coeffKgLbs }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Coefficient pied/mètre</th>
                                <td colspan="3" class="font-monospace text-start">{{ coeffFtM }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="text-nowrap pe-4">Formule charge alaire</th>
                                <td colspan="3" class="font-monospace text-start">
                                    ( ( {{ inputs.weight }} + {{ inputs.gear }} ) * {{ coeffKgLbs }} ) /
                                    {{ inputs.current }} = {{ info.charges.current | number : '1.5' }}<br />
                                    ( ( poids nu en kg + poids equipement en kg ) * coefficient kg/lbs ) / taille de
                                    voile en ft<sup>2</sup>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="col-lg-6 col-md-8 col-sm-12">
                    @if (displayCharts) {
                    <div class="linechart position-relative w-100 mt-3">
                        <canvas baseChart class="mx-auto" width="800" height="280"
                            [data]="chartConfig.lineChartData" [options]="chartConfig.lineChartOptions"
                            [legend]="chartConfig.lineChartLegend" [type]="'line'">
                        </canvas>
                    </div>
                    }
                </div>
            </div>
            <mat-divider class="my-3"></mat-divider>
            <h4 class="py-2 mb-0">Tailles de voile pour {{ inputs.weight }} kg</h4>
            <div>
                Prochain changement de valeurs dans {{ ((this.currentRange.end + 1) - inputs.jumps) }}
                {{ ((this.currentRange.end + 1) - inputs.jumps) > 1 ? 'sauts' : 'saut'}}<br />
            </div>
            <div class="text-end">
                {{ ((((inputs.jumps - this.currentRange.start) + 1) / ((this.currentRange.end - this.currentRange.start) + 1)) * 100) | number : '1.2-2' }}%
                de la tranche actuelle ({{this.currentRange.start}} à {{this.currentRange.end}})
            </div>
            <mat-progress-bar mode="determinate"
                [value]="((((inputs.jumps - this.currentRange.start) + 1) / ((this.currentRange.end - this.currentRange.start) + 1)) * 100)"
                color="warn"></mat-progress-bar>
            <table class="table table-striped table-dark table-hover mat-elevation-z2 mb-1">
                <thead>
                    <tr class="warn">
                        <th class="text-nowrap pe-4"></th>
                        @for (header of sizesHeader; track header; let index = $index) {
                        <th class="pl-3 pr-3 {{ tableHeader[(index+1)].active }}">{{ header.name }}</th>
                        }
                    </tr>
                </thead>
                <tbody>
                    <tr class="warn">
                        <th class="firtext-nowrap pe-4st">Taille de voile en ft<sup>2</sup></th>
                        @for (value of sizesValuesFeet; track value; let index = $index) {
                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
                        }
                    </tr>
                    <tr class="warn">
                        <th class="text-nowrap pe-4">Abbattement 11%</th>
                        @for (value of sizesMinValuesFeet; track value; let index = $index) {
                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
                        }
                    </tr>
                    <tr class="warn">
                        <th class="text-nowrap pe-4">Charge alaire</th>
                        @for (charge of sizesCharges; track charge; let index = $index) {
                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">
                            {{ charge | number : '1.2-3' }}</td>
                        }
                    </tr>
                    <tr class="warn">
                        <th class="text-nowrap pe-4">Taille de voile en m<sup>2</sup></th>
                        @for (value of sizesValuesMeter; track value; let index = $index) {
                        <td class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">
                            {{ value | number : '1.2-2' }}</td>
                        }
                    </tr>
                </tbody>
            </table>
            <mat-divider class="my-3"></mat-divider>
            <h4 class="py-2 mb-0">Tableau des tailles de voile par poids</h4>
            <div class="text-end">
                {{ ((inputs.jumps / 1600) * 100) | number : '1.2-2' }}% de la plage complète (0 à 1600)
            </div>
            <mat-progress-bar mode="determinate" [value]="((inputs.jumps / 1600) * 100)" color="warn">
            </mat-progress-bar>
            <table mat-table [dataSource]="canopy_size_table" matSort
                class="table table-striped table-dark table-hover mat-elevation-z2">
                <!-- weight column -->
                <ng-container matColumnDef="weight">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header class="text-nowrap pe-4 {{tableHeader[0].active}}">
                        {{tableHeader[0].name}} </th>
                    <th mat-cell *matCellDef="let element;" class="text-end ps-3 pe-4 fs-6" role="button"
                        (click)="setCurrentWeight(element.weight)">
                        <span class="text-warn d-block">{{element.weight}}</span>
                    </th>
                </ng-container>
                <!-- range_1 column -->
                <ng-container matColumnDef="range_1">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[1].active}}">
                        {{tableHeader[1].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[0].active}}">{{element.ranges[0].value}}</td>
                </ng-container>
                <!-- range_2 column -->
                <ng-container matColumnDef="range_2">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[2].active}}">
                        {{tableHeader[2].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[1].active}}">{{element.ranges[1].value}}</td>
                </ng-container>
                <!-- range_3 column -->
                <ng-container matColumnDef="range_3">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[3].active}}">
                        {{tableHeader[3].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[2].active}}">{{element.ranges[2].value}}</td>
                </ng-container>
                <!-- range_4 column -->
                <ng-container matColumnDef="range_4">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[4].active}}">
                        {{tableHeader[4].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[3].active}}">{{element.ranges[3].value}}</td>
                </ng-container>
                <!-- range_5 column -->
                <ng-container matColumnDef="range_5">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[5].active}}">
                        {{tableHeader[5].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[4].active}}">{{element.ranges[4].value}}</td>
                </ng-container>
                <!-- range_6 column -->
                <ng-container matColumnDef="range_6">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[6].active}}">
                        {{tableHeader[6].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[5].active}}">{{element.ranges[5].value}}</td>
                </ng-container>
                <!-- range_7 column -->
                <ng-container matColumnDef="range_7">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[7].active}}">
                        {{tableHeader[7].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[6].active}}">{{element.ranges[6].value}}</td>
                </ng-container>
                <!-- range_8 column -->
                <ng-container matColumnDef="range_8">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[8].active}}">
                        {{tableHeader[8].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[7].active}}">{{element.ranges[7].value}}</td>
                </ng-container>
                <!-- range_9 column -->
                <ng-container matColumnDef="range_9">
                    <th class="pl-3" mat-header-cell *matHeaderCellDef class="{{tableHeader[9].active}}">
                        {{tableHeader[9].name}} </th>
                    <td mat-cell *matCellDef="let element;"
                        class="pl-3 text-nowrap fs-6 {{element.ranges[8].active}}">{{element.ranges[8].value}}</td>
                </ng-container>
                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: false" class="warn"></tr>
                <tr mat-row *matRowDef="let row; columns: displayedColumns;"
                    class="text-middle font-monospace warn {{row.active}}" id="weight_{{row.weight}}"></tr>
            </table>
            <div class="clearfix">
                <mat-paginator [pageSize]="50" [pageSizeOptions]="[5, 10, 15, 25, 50]" showFirstLastButtons
                    class="pull-right mb-1 mt-2"></mat-paginator>
            </div>
        </mat-card-content>
    </mat-card>
</div>