<div class="content">
    <div>
        <button
            mat-raised-button
            color="accent"
            [routerLink]="['/newTunnelFlight']"
            [routerLinkActive]="['active']"
            skipLocationChange
        >
            {{ "ListTunnelFlight_Add" | translate }}
        </button>
    </div>

    @if (isLoading) {
        <mat-progress-bar [mode]="'indeterminate'"></mat-progress-bar>
    }

    <mat-radio-group
        [(ngModel)]="selectedPeriod"
        (ngModelChange)="onPeriodChange()"
    >
        <mat-radio-button value="currentYear">{{
            "ListTunnelFlight_CurrentYear" | translate
        }}</mat-radio-button>
        <mat-radio-button value="12Months">{{
            "ListTunnelFlight_12Months" | translate
        }}</mat-radio-button>
        <mat-radio-button value="all">{{
            "ListTunnelFlight_AllFlights" | translate
        }}</mat-radio-button>
    </mat-radio-group>

    <mat-nav-list>
        @for (stat of stats; track stat) {
            <mat-list-item matListItemLine>
                <label>{{ stat.label }} : {{ stat.hoursAndMinutes.hours }}h {{ stat.hoursAndMinutes.minutes }}m</label>
            </mat-list-item>
        }
    </mat-nav-list>

    <div class="chart-container">
        <!-- https://www.freecodecamp.org/news/how-to-make-bar-and-line-charts-using-chartjs-in-angular/ -->
        <canvas
            baseChart
            [data]="barChartData"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [type]="barChartType"
        >
        </canvas>
    </div>

    <div>
        <button mat-raised-button color="accent" (click)="onLoadTable()">
            {{ "ListTunnelFlight_LoadTable" | translate }}
        </button>

        @if (dataSourceTable?.data.length) {
            <table mat-table [dataSource]="dataSourceTable">
                <ng-container matColumnDef="id">
                    <th mat-header-cell *matHeaderCellDef>ID</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="element.id"
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="tunnel">
                    <th mat-header-cell *matHeaderCellDef>Tunnel</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="element.tunnel.name"
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="jumpType">
                    <th mat-header-cell *matHeaderCellDef>Jump Type</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="element.jumpType.name"
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="nbMinutes">
                    <th mat-header-cell *matHeaderCellDef>Minutes</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="element.nbMinutes"
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="notes">
                    <th mat-header-cell *matHeaderCellDef>Notes</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="element.notes"
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="flightDate">
                    <th mat-header-cell *matHeaderCellDef>Date</th>
                    <td mat-cell *matCellDef="let element">
                        <span
                            class="smallSpanWithBreakWord"
                            [innerHTML]="
                                element.flightDate | date: 'yyyy-MM-dd'
                            "
                        ></span>
                    </td>
                </ng-container>
                <ng-container matColumnDef="actions">
                    <th
                        mat-header-cell
                        *matHeaderCellDef
                        style="min-width: 80px"
                    ></th>
                    <td
                        mat-cell
                        *matCellDef="let element"
                        style="text-align: left"
                    >
                        <mat-icon
                            aria-hidden="false"
                            aria-label="Delete this jump"
                            style="cursor: pointer"
                            (click)="delete(element)"
                            svgIcon="delete"
                        ></mat-icon>
                    </td>
                </ng-container>
                <tr
                    mat-header-row
                    *matHeaderRowDef="displayedColumns; sticky: true"
                ></tr>
                <tr
                    mat-row
                    *matRowDef="let row; columns: displayedColumns"
                ></tr>
            </table>
        }
    </div>
</div>
