<div class="calculator-page content">
    <mat-card class="calculator">
        <mat-card-header class="bg-warn rounded-top py-3 px-4">
            <mat-card-title>Calcul de taille de voile</mat-card-title>
            <mat-card-subtitle>DT48 - 08 février 2024</mat-card-subtitle>
            <span class="flex-spacer"></span>
            <form #searchFormData="ngForm" class="inputs-form">
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic">
                    <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">
                    <mat-label>Poids nu</mat-label>
                    <input matInput [(ngModel)]="inputs.weight" (change)="refresh()" type="number" min="60" max="110" name="weight">
                </mat-form-field>
                <mat-form-field class="bg-crystal me-3" subscriptSizing="dynamic">
                    <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">
                    <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>
            <button mat-icon-button [matMenuTriggerFor]="menuCalculator" aria-label="Menu Calculator">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menuCalculator="matMenu">
                <ng-container *ngFor="let menuitem of menuItems.getMenuCalculator()">
                    <button mat-menu-item [routerLink]="['/', menuitem.state]" *ngIf="menuitem.type === 'link'">
                        <mat-icon [fontIcon]="menuitem.icon"></mat-icon>
                        <span>{{ menuitem.name }}</span>
                    </button>
                </ng-container>
            </mat-menu>
        </mat-card-header>
        <mat-card-content class="my-4">
            <div class="row">
                <div class="col-lg-6 col-md-8 col-sm-12">
                    <div *ngIf="displayCharts" class="linechart position-relative w-100 mt-3">
                        <canvas baseChart class="mx-auto" width="900" height="350"
                            [data]="chartConfig.lineChartData"
                            [options]="chartConfig.lineChartOptions"
                            [legend]="chartConfig.lineChartLegend"
                            [type]="'line'">
                        </canvas>
                    </div>
                </div>
                <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="first"></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="first">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="first">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="first">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="first">Coefficient kilo/livres</th>
                                <td colspan="3" class="font-monospace text-start">{{ coeffKgLbs }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="first">Coefficient pied/mètre</th>
                                <td colspan="3" class="font-monospace text-start">{{ coeffFtM }}</td>
                            </tr>
                            <tr class="warn">
                                <th class="first">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>
            <hr />
            <h4 class="border-bottom border-secondary py-2 mb-2">Tailles de voile pour {{ inputs.weight }} kg</h4>
            <table class="table table-striped table-dark table-hover mat-elevation-z2 mb-1">
                <thead>
                    <tr class="warn">
                        <th class="first"></th>
                        <th *ngFor="let header of sizesHeader; let index = index;" class="pl-3 pr-3 {{ tableHeader[(index+1)].active }}">{{ header.name }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="warn">
                        <th class="first">Taille de voile en ft<sup>2</sup></th>
                        <td *ngFor="let value of sizesValuesFeet; let index = index;" class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
                    </tr>
                    <tr class="warn">
                        <th class="first">Abbattement 11%</th>
                        <td *ngFor="let value of sizesMinValuesFeet; let index = index;" class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value }}</td>
                    </tr>
                    <tr class="warn">
                        <th class="first">Charge alaire</th>
                        <td *ngFor="let charge of sizesCharges; let index = index;" class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ charge | number : '1.2-3' }}</td>
                    </tr>
                    <tr class="warn">
                        <th class="first">Taille de voile en m<sup>2</sup></th>
                        <td *ngFor="let value of sizesValuesMeter; let index = index;" class="pl-3 text-nowrap {{ tableHeader[(index+1)].active }}">{{ value | number : '1.2-2' }}</td>
                    </tr>
                </tbody>
            </table>
            <hr />
            <h4 class="border-bottom border-secondary py-2 mb-2">Tableau des tailles de voile par poids</h4>
            <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="first {{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>
<!--
<div class="content">
    <h1>{{title}}</h1>
    <div class="col-xs-12">
        <div class="demo-buttons my-2">
            <button mat-button color="primary" class="me-2">Texte</button>
            <button mat-stroked-button color="primary" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="primary" class="me-2">Texte Flat</button>
            <button mat-raised-button color="primary" class="me-2">Texte Raised</button>
            <button mat-icon-button color="primary" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-fab color="primary" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-mini-fab color="primary" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
        </div>
        <div class="demo-buttons my-2">
            <button mat-button color="accent" class="me-2">Texte</button>
            <button mat-stroked-button color="accent" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="accent" class="me-2">Texte Flat</button>
            <button mat-raised-button color="accent" class="me-2">Texte Raised</button>
            <button mat-icon-button color="accent" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-fab color="accent" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-mini-fab color="accent" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
        </div>
        <div class="demo-buttons my-2">
            <button mat-button color="warn" class="me-2">Texte</button>
            <button mat-stroked-button color="warn" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="warn" class="me-2">Texte Flat</button>
            <button mat-raised-button color="warn" class="me-2">Texte Raised</button>
            <button mat-icon-button color="warn" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-fab color="warn" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-mini-fab color="warn" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
        </div>
        <div class="demo-buttons my-2">
            <button mat-button color="danger" class="me-2">Texte</button>
            <button mat-stroked-button color="danger" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="danger" class="me-2">Texte Flat</button>
            <button mat-raised-button color="danger" class="me-2">Texte Raised</button>
            <button mat-icon-button color="danger" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-fab color="danger" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-mini-fab color="danger" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
        </div>
        <div class="demo-buttons my-2">
            <button mat-button color="info" class="me-2">Texte</button>
            <button mat-stroked-button color="info" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="info" class="me-2">Texte Flat</button>
            <button mat-raised-button color="info" class="me-2">Texte Raised</button>
            <button mat-icon-button color="info" class="me-2">
                <mat-icon>info</mat-icon>
            </button>
            <button mat-fab color="info" class="me-2">
                <mat-icon>info</mat-icon>
            </button>
            <button mat-mini-fab color="info" class="me-2">
                <mat-icon>info</mat-icon>
            </button>
        </div>
        <div class="demo-buttons my-2">
            <button mat-button color="success" class="me-2">Texte</button>
            <button mat-stroked-button color="success" class="me-2">Texte Stroked</button>
            <button mat-flat-button color="success" class="me-2">Texte Flat</button>
            <button mat-raised-button color="success" class="me-2">Texte Raised</button>
            <button mat-icon-button color="success" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-fab color="success" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
            <button mat-mini-fab color="success" class="me-2">
                <mat-icon>check_circle</mat-icon>
            </button>
        </div>
    </div>
    <section>
        <div class="demo-label">Basic</div>
        <div class="demo-button-row">
            <button mat-button>Basic</button>
            <button mat-button color="primary">Primary</button>
            <button mat-button color="accent">Accent</button>
            <button mat-button color="warn">Warn</button>
            <button mat-button color="danger">Danger</button>
            <button mat-button color="info">Info</button>
            <button mat-button color="success">Success</button>
            <button mat-button disabled>Disabled</button>
            <a mat-button href="https://www.google.com/" target="_blank">Link</a>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">Raised</div>
        <div class="demo-button-row">
            <button mat-raised-button>Basic</button>
            <button mat-raised-button color="primary">Primary</button>
            <button mat-raised-button color="accent">Accent</button>
            <button mat-raised-button color="warn">Warn</button>
            <button mat-raised-button color="danger">Danger</button>
            <button mat-raised-button color="info">Info</button>
            <button mat-raised-button color="success">Success</button>
            <button mat-raised-button disabled>Disabled</button>
            <a mat-raised-button href="https://www.google.com/" target="_blank">Link</a>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">Stroked</div>
        <div class="demo-button-row">
            <button mat-stroked-button>Basic</button>
            <button mat-stroked-button color="primary">Primary</button>
            <button mat-stroked-button color="accent">Accent</button>
            <button mat-stroked-button color="warn">Warn</button>
            <button mat-stroked-button color="danger">Danger</button>
            <button mat-stroked-button color="info">Info</button>
            <button mat-stroked-button color="success">Success</button>
            <button mat-stroked-button disabled>Disabled</button>
            <a mat-stroked-button href="https://www.google.com/" target="_blank">Link</a>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">Flat</div>
        <div class="demo-button-row">
            <button mat-flat-button>Basic</button>
            <button mat-flat-button color="primary">Primary</button>
            <button mat-flat-button color="accent">Accent</button>
            <button mat-flat-button color="warn">Warn</button>
            <button mat-flat-button color="danger">Danger</button>
            <button mat-flat-button color="info">Info</button>
            <button mat-flat-button color="success">Success</button>
            <button mat-flat-button disabled>Disabled</button>
            <a mat-flat-button href="https://www.google.com/" target="_blank">Link</a>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">Icon</div>
        <div class="demo-button-row">
            <div class="demo-flex-container">
                <button mat-icon-button aria-label="Example icon button with a vertical three dot icon">
                    <mat-icon>more_vert</mat-icon>
                </button>
                <button mat-icon-button color="primary" aria-label="Example icon button with a home icon">
                    <mat-icon>home</mat-icon>
                </button>
                <button mat-icon-button color="accent" aria-label="Example icon button with a menu icon">
                    <mat-icon>menu</mat-icon>
                </button>
                <button mat-icon-button color="warn" aria-label="Example icon button with a heart icon">
                    <mat-icon>favorite</mat-icon>
                </button>
                <button mat-icon-button color="danger" aria-label="Example icon button with a heart icon">
                    <mat-icon>favorite</mat-icon>
                </button>
                <button mat-icon-button color="info" aria-label="Example icon button with a heart icon">
                    <mat-icon>favorite</mat-icon>
                </button>
                <button mat-icon-button color="success" aria-label="Example icon button with a heart icon">
                    <mat-icon>favorite</mat-icon>
                </button>
                <button mat-icon-button disabled aria-label="Example icon button with a open in new tab icon">
                    <mat-icon>open_in_new</mat-icon>
                </button>
            </div>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">FAB</div>
        <div class="demo-button-row">
            <div class="demo-flex-container">
                <div class="demo-button-container">
                    <button mat-fab color="primary" aria-label="Example icon button with a delete icon">
                        <mat-icon>delete</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab color="accent" aria-label="Example icon button with a bookmark icon">
                        <mat-icon>bookmark</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab color="warn" aria-label="Example icon button with a home icon">
                        <mat-icon>home</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab color="danger" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab color="info" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab color="success" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-fab disabled aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
            </div>
        </div>
    </section>
    <mat-divider></mat-divider>
    <section>
        <div class="demo-label">Mini FAB</div>
        <div class="demo-button-row">
            <div class="demo-flex-container">
                <div class="demo-button-container">
                    <button mat-mini-fab color="primary" aria-label="Example icon button with a menu icon">
                        <mat-icon>menu</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab color="accent" aria-label="Example icon button with a plus one icon">
                        <mat-icon>plus_one</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab color="warn" aria-label="Example icon button with a filter list icon">
                        <mat-icon>filter_list</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab color="danger" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab color="info" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab color="success" aria-label="Example icon button with a heart icon">
                        <mat-icon>favorite</mat-icon>
                    </button>
                </div>
                <div class="demo-button-container">
                    <button mat-mini-fab disabled aria-label="Example icon button with a home icon">
                        <mat-icon>home</mat-icon>
                    </button>
                </div>
            </div>
        </div>
    </section>
</div>
-->