<div class="row mx-0">
    <div class="col-md-6 col-xs-12 px-0">
        <form class="mt-3" [formGroup]="searchForm" (ngSubmit)="submitForm()">
            <mat-form-field appearance="fill">
                <input matInput type="number" placeholder="Rechercher un saut" formControlName="numero">
                @if (this.searchForm.controls['numero'].status === 'INVALID') {
                <mat-error>{{getErrorMessage()}}</mat-error>
                }
            </mat-form-field>
            <button mat-raised-button color="primary" type="submit" class="ms-2">
                <mat-icon aria-label="Rechercher" fontIcon="search"></mat-icon> Rechercher
            </button>
            <mat-spinner [diameter]="32" [hidden]="!loading" color="accent" class="align-middle ms-2"></mat-spinner>
            <span [hidden]="jumpsCount || loading" class="ms-2 fst-italic">Aucun saut à afficher pour le moment.</span>
            <span [hidden]="!loading" class="ms-2 fst-italic">Chargement des sauts en cours</span>
        </form>
    </div>
    <div class="col-md-6 col-xs-12 px-0">
        <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons class="mb-1 mt-2">
        </mat-paginator>
    </div>
</div>
<mat-progress-bar [mode]="loading ? 'query' : 'determinate'" [value]="loading ? 0 : 100" color="navy-light">
</mat-progress-bar>
<table mat-table [dataSource]="jumps" matSort
    class="table table-dark table-striped table-hover table-condensed mat-elevation-z2">
    <caption [hidden]="jumpsCount || loading">Aucun saut à afficher pour le moment.</caption>
    <!-- Numero Column -->
    <ng-container matColumnDef="numero">
        <th mat-header-cell *matHeaderCellDef mat-sort-header> # </th>
        <td class="pl-3 pr-3" mat-cell *matCellDef="let element">
            @if (element.numero) {
            <!--<a [routerLink]="['/jump', element.slug]" class="accent">{{element.numero}}</a>-->
            <button mat-button (click)="openViewDialog(element)" color="primary">{{element.numero}}</button>
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Date Column -->
    <ng-container matColumnDef="date">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Date </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.date) {
            {{element.date | date: 'mediumDate'}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Lieu Column -->
    <ng-container matColumnDef="lieu">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Lieu </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.lieu) {
            {{element.lieu}} - {{element.oaci}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Oaci Column
    <ng-container matColumnDef="oaci">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Oaci </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.oaci">{{element.oaci}}</ng-container>
        <ng-container *ngIf="!element.numero">
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
        </ng-container>
        </td>
    </ng-container> -->
    <!-- Aeronef Column -->
    <ng-container matColumnDef="aeronef">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Aeronef </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.aeronef) {
            {{element.aeronef}} - {{element.imat}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Imat Column
    <ng-container matColumnDef="imat">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Imat </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.imat">{{element.imat}}</ng-container>
        <ng-container *ngIf="!element.numero">
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
        </ng-container>
        </td>
    </ng-container> -->
    <!-- Hauteur Column -->
    <ng-container matColumnDef="hauteur">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Hauteur </th>
        <td class="pl-3" mat-cell *matCellDef="let element">
            @if (element.hauteur) {
            {{element.hauteur}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Voile Column -->
    <ng-container matColumnDef="voile">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Voile </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.voile) {
            {{element.voile}} - {{element.taille}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Taille Column
    <ng-container matColumnDef="taille">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Taille </th>
        <td class="text-nowrap text-end pl-3 pr-3" mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.taille">{{element.taille}}</ng-container>
        <ng-container *ngIf="!element.numero">
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
        </ng-container>
        </td>
    </ng-container> -->
    <!-- Categorie Column -->
    <ng-container matColumnDef="categorie">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Categorie </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.categorie) {
            {{element.categorie}}{{element.categorie && element.module ? ' - ' : ''}}{{element.module}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Module Column
    <ng-container matColumnDef="module">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Module </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.module">{{element.module}}</ng-container>
        <ng-container *ngIf="!element.numero">
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
        </ng-container>
        </td>
    </ng-container> -->
    <!-- Zone Column -->
    <ng-container matColumnDef="zone">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Zone </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.zone) {
            {{element.zone}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Participants Column -->
    <ng-container matColumnDef="participants">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Participants </th>
        <td class="pl-3 pr-3" mat-cell *matCellDef="let element">
            @if (element.participants) {
            {{element.participants}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Programme Column -->
    <ng-container matColumnDef="programme">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Programme </th>
        <td class="pl-3" mat-cell *matCellDef="let element">
            @if (element.programme) {
            {{element.programme}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Accessoires Column -->
    <ng-container matColumnDef="accessoires">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Accessoires </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.accessoires) {
            {{element.accessoires}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Dossier Column
    <ng-container matColumnDef="dossier">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Dossier </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
        <ng-container *ngIf="element.dossier">{{element.dossier}}</ng-container>
        <ng-container *ngIf="!element.numero">
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
        </ng-container>
        </td>
    </ng-container> -->
    <!-- Video Column
    <ng-container matColumnDef="video">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Video </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.video) {
            {{element.video}}
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container> -->
    <!-- Files Column -->
    <ng-container matColumnDef="files">
        <th class="pl-3" mat-header-cell *matHeaderCellDef> Fichiers </th>
        <td class="pl-3 text-nowrap" mat-cell *matCellDef="let element">
            @if (element.files) {
                @for (file of element.files; track $index) {
                    @switch (file.type) {
                        @case ('video') {
                            <button mat-button (click)="openViewDialog(element)" color="navy-light">
                                <mat-icon fontIcon="videocam me-2"></mat-icon> {{ file.type }}
                            </button>
                        }
                        @case ('image') {
                            <button mat-button (click)="openViewDialog(element)" color="navy-light">
                                <mat-icon fontIcon="image me-2"></mat-icon> {{ file.type }}
                            </button>
                        }
                        @case ('kml') {
                            <button mat-button (click)="openViewDialog(element)" color="navy-light">
                                <mat-icon fontIcon="language me-2"></mat-icon> {{ file.type }}
                            </button>
                        }
                        @default {
                            <button mat-button (click)="openViewDialog(element)" color="navy-light">
                                <mat-icon fontIcon="description me-2"></mat-icon> {{ file.type }}
                            </button>
                        }
                    }
                }
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [theme]="{width: '30px', height: '13px', marginBottom: '0px'}"></ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <!-- Actions Column -->
    <ng-container matColumnDef="actions">
        <th class="pl-3 text-center" mat-header-cell *matHeaderCellDef> {{ showAdd ? 'Actions' : 'Favoris' }} </th>
        <td class="pl-2 text-nowrap text-center" mat-cell *matCellDef="let element">
            @if (element.numero) {
            <button [hidden]="!showAdd" mat-icon-button [matMenuTriggerFor]="actionMenu"
                aria-label="Actions sur le saut">
                <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu [hidden]="!showAdd" #actionMenu="matMenu">
                <button mat-menu-item [routerLink]="['/jump', element.slug]">
                    <mat-icon aria-label="Voir" fontIcon="visibility" color="info" class="mini"></mat-icon>
                    <span class="text-info">Détails</span>
                </button>
                <button mat-menu-item (click)="openEditDialog(element)">
                    <mat-icon aria-label="Modifier" fontIcon="edit" color="primary" class="mini"></mat-icon>
                    <span class="text-primary">Modifier</span>
                </button>
                <button mat-menu-item (click)="openDeleteDialog(element)">
                    <mat-icon aria-label="Supprimer" fontIcon="delete" color="raspberry" class="mini"></mat-icon>
                    <span class="text-raspberry">Supprimer</span>
                </button>
            </mat-menu>
            }
            @if (!element.numero) {
            <ngx-skeleton-loader [hidden]="!showAdd" appearance="circle"
                [theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}">
            </ngx-skeleton-loader>
            <ngx-skeleton-loader [hidden]="!showAdd" appearance="circle"
                [theme]="{width: '32px', height: '32px', marginBottom: '0px', marginRight: '7px'}">
            </ngx-skeleton-loader>
            <ngx-skeleton-loader appearance="circle"
                [theme]="{width: '20px', height: '20px', marginBottom: '0px', marginRight: '7px'}">
            </ngx-skeleton-loader>
            }
        </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true" class="accent"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;" class="text-middle accent"></tr>
</table>