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

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

    <div>
        <table mat-table [dataSource]="dataSourceTable">
            <ng-container matColumnDef="infos">
                <th
                    mat-header-cell
                    *matHeaderCellDef
                    style="min-width: 80px; text-wrap: nowrap"
                ></th>
                <td
                    mat-cell
                    *matCellDef="let element"
                    style="text-align: left; text-wrap: nowrap"
                >
                    <mat-icon
                        aria-hidden="false"
                        aria-label="Additional informations of the jump"
                        style="cursor: pointer"
                        (click)="openDialog(element, false)"
                        svgIcon="info"
                    ></mat-icon>
                    <mat-icon
                        aria-hidden="false"
                        aria-label="Notes"
                        [style.visibility]="
                            element.notes != undefined ? 'visible' : 'hidden'
                        "
                        svgIcon="note"
                    ></mat-icon>
                    <mat-icon
                        aria-hidden="false"
                        aria-label="Special jump"
                        [style.visibility]="
                            element.isSpecial ? 'visible' : 'hidden'
                        "
                        svgIcon="celebration"
                    ></mat-icon>
                </td>
            </ng-container>

            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef style="min-width: 70px">
                    {{ "ListJump_Header_Num" | translate }}
                </th>
                <td mat-cell *matCellDef="let element; let i = index">
                    {{
                        paginator.length -
                            (paginator.pageIndex * paginator.pageSize + i)
                    }}
                </td>
            </ng-container>

            <ng-container matColumnDef="jumpDate">
                <th mat-header-cell *matHeaderCellDef>
                    {{ "ListJump_Header_Date" | translate }}
                </th>
                <td mat-cell *matCellDef="let element">
                    <span
                        class="smallSpanWithBreakWord"
                        [innerHTML]="element.jumpDate | date: 'yyyy-MM-dd'"
                    ></span>
                </td>
            </ng-container>

            <ng-container matColumnDef="jumpType">
                <th
                    mat-header-cell
                    *matHeaderCellDef
                    style="min-width: 100px; text-wrap: nowrap"
                >
                    {{ "ListJump_Header_JumpType" | translate }}
                </th>
                <td
                    mat-cell
                    *matCellDef="let element"
                    style="text-wrap: nowrap"
                >
                    <span
                        class="smallSpanWithBreakWord"
                        [innerHTML]="element.jumpType.name"
                    ></span>
                </td>
            </ng-container>

            <ng-container matColumnDef="aircraft">
                <th mat-header-cell *matHeaderCellDef style="min-width: 110px">
                    {{ "ListJump_Header_Aircraft" | translate }}
                </th>
                <td mat-cell *matCellDef="let element">
                    <span
                        class="smallSpanWithBreakWord"
                        [innerHTML]="element.aircraft.name"
                    ></span>
                </td>
            </ng-container>

            <ng-container matColumnDef="dropZone">
                <th mat-header-cell *matHeaderCellDef>
                    {{ "ListJump_Header_Dz" | translate }}
                </th>
                <td mat-cell *matCellDef="let element">
                    <span
                        class="spanWithBreakWord"
                        [innerHTML]="element.dropZone.name"
                    ></span>
                </td>
            </ng-container>

            <ng-container matColumnDef="gear">
                <th mat-header-cell *matHeaderCellDef>
                    {{ "ListJump_Header_Id" | translate }}
                </th>
                <td mat-cell *matCellDef="let element">
                    {{ element.gear.name }}
                </td>
            </ng-container>

            <ng-container matColumnDef="actions">
                <th
                    mat-header-cell
                    *matHeaderCellDef
                    style="min-width: 80px; text-wrap: nowrap"
                ></th>
                <td
                    mat-cell
                    *matCellDef="let element"
                    style="text-align: left; text-wrap: nowrap"
                >
                    <mat-icon
                        aria-hidden="false"
                        aria-label="Delete this jump"
                        style="cursor: pointer"
                        (click)="delete(element)"
                        svgIcon="delete"
                    ></mat-icon>
                    <mat-icon
                        aria-hidden="false"
                        aria-label="Update some informations of the jump"
                        style="cursor: pointer; margin-left: 10px"
                        (click)="openDialog(element, true)"
                        svgIcon="edit"
                    ></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>

    <mat-paginator
        #paginator
        [pageSize]="20"
        (page)="pageChanged($event)"
        showFirstLastButtons
    ></mat-paginator>
</div>
