<h2 mat-dialog-title class="bg-warn border-bottom border-light-subtle d-flex mb-3 pt-3 pb-2">
    Ajouter un saut<span class="flex-spacer"></span>
    <mat-icon fontIcon="close" class="pointer" (click)="closeDialog()"></mat-icon>
</h2>
<mat-dialog-content>
    <div class="container">
        <!--
        <div class="row">
            <div class="col-xs-12 border-bottom border-dark pb-2 mb-2">
                <mat-form-field appearance="outline" class="mt-2 me-2" color="warn">
                    <mat-label>Numéro ou plage de saut à ajouter</mat-label>
                    <input matInput [(ngModel)]="params.numeros" required />
                    <mat-hint>645 / +5 / 650-660</mat-hint>
                </mat-form-field>
                <mat-form-field appearance="outline" class="mt-2 me-3" color="warn">
                    <mat-label>Choisissez une date</mat-label>
                    <input matInput [matDatepicker]="datepicker" [(ngModel)]="params.date" (dateChange)="onDateChange()" required />
                    <mat-hint>MM/DD/YYYY</mat-hint>
                    <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
                    <mat-datepicker #datepicker>
                        <mat-datepicker-actions>
                            <button mat-button matDatepickerCancel>Annuler</button>
                            <button mat-raised-button color="warn" matDatepickerApply>Appliquer</button>
                        </mat-datepicker-actions>
                    </mat-datepicker>
                </mat-form-field>
                <mat-checkbox (change)="setLastJump($event.checked)" [checked]="useLast.all">
                    <mat-icon fontIcon="history" class="align-middle me-2"></mat-icon> <span class="d-inline-block align-middle">Utiliser les valeurs du dernier saut</span>
                </mat-checkbox>
            </div>
        </div>
        -->
        <form class="row" [formGroup]="jumpForm" (ngSubmit)="submitForm()">
            <div class="col-xs-12 border-bottom border-dark pb-2 mb-2">
                <mat-form-field appearance="outline" class="mt-2 me-2" color="warn">
                    <mat-label>Numéro ou plage de saut à ajouter</mat-label>
                    <input matInput formControlName="numero" required />
                    <mat-hint>645 / +5 / 650-660</mat-hint>
                </mat-form-field>
                <mat-form-field appearance="outline" class="mt-2 me-3" color="warn">
                    <mat-label>Choisissez une date</mat-label>
                    <input matInput [matDatepicker]="datepicker" formControlName="date" (dateChange)="onDateChange()" required />
                    <mat-hint>MM/DD/YYYY</mat-hint>
                    <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
                    <mat-datepicker #datepicker>
                        <mat-datepicker-actions>
                            <button mat-button matDatepickerCancel>Annuler</button>
                            <button mat-raised-button color="warn" matDatepickerApply>Appliquer</button>
                        </mat-datepicker-actions>
                    </mat-datepicker>
                </mat-form-field>
                <mat-checkbox (change)="setLastJump($event.checked)" [checked]="useLast.all">
                    <mat-icon fontIcon="history" class="align-middle me-2"></mat-icon> <span class="d-inline-block align-middle">Utiliser les valeurs du dernier saut</span>
                </mat-checkbox>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Dropzone
                    <mat-checkbox class="float-end" (change)="setLastDropzone($event.checked)" [checked]="useLast.dropzone">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Lieu</mat-label>
                    <input matInput formControlName="lieu">
                    <mat-error *ngIf="this.jumpForm.controls['lieu'].status === 'INVALID'">{{getErrorMessage('lieu')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Oaci</mat-label>
                    <input matInput formControlName="oaci">
                    <mat-error *ngIf="this.jumpForm.controls['oaci'].status === 'INVALID'">{{getErrorMessage('oaci')}}</mat-error>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Aéronef
                    <mat-checkbox class="float-end" (change)="setLastAeronef($event.checked)" [checked]="useLast.aeronef">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Aéronef</mat-label>
                    <input matInput formControlName="aeronef">
                    <mat-error *ngIf="this.jumpForm.controls['aeronef'].status === 'INVALID'">{{getErrorMessage('aeronef')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Imatriculation</mat-label>
                    <input matInput formControlName="imat">
                    <mat-error *ngIf="this.jumpForm.controls['imat'].status === 'INVALID'">{{getErrorMessage('imat')}}</mat-error>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Voile
                    <mat-checkbox class="float-end" (change)="setLastVoile($event.checked)" [checked]="useLast.voile">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Modèle</mat-label>
                    <input matInput formControlName="voile">
                    <mat-error *ngIf="this.jumpForm.controls['voile'].status === 'INVALID'">{{getErrorMessage('voile')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Taille en ft<sup>2</sup></mat-label>
                    <input matInput formControlName="taille" type="number" min="0" step="1">
                    <span matTextSuffix>ft<sup>2</sup></span>
                    <mat-error *ngIf="this.jumpForm.controls['taille'].status === 'INVALID'">{{getErrorMessage('taille')}}</mat-error>
                </mat-form-field>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Altitude
                    <mat-checkbox class="float-end" (change)="setLastAltitude($event.checked)" [checked]="useLast.altitude">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Hauteur de largage</mat-label>
                    <input matInput formControlName="hauteur" type="number" min="0" step="1">
                    <mat-error *ngIf="this.jumpForm.controls['hauteur'].status === 'INVALID'">{{getErrorMessage('hauteur')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Hauteur de déploiement</mat-label>
                    <input matInput formControlName="deploiement" type="number" min="0" step="1">
                    <mat-error *ngIf="this.jumpForm.controls['deploiement'].status === 'INVALID'">{{getErrorMessage('deploiement')}}</mat-error>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Discipline
                    <mat-checkbox class="float-end" (change)="setLastDiscipline($event.checked)" [checked]="useLast.discipline">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Categorie</mat-label>
                    <input matInput formControlName="categorie">
                    <mat-error *ngIf="this.jumpForm.controls['categorie'].status === 'INVALID'">{{getErrorMessage('categorie')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Module</mat-label>
                    <input matInput formControlName="module">
                    <mat-error *ngIf="this.jumpForm.controls['module'].status === 'INVALID'">{{getErrorMessage('module')}}</mat-error>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Divers
                    <mat-checkbox class="float-end" (change)="setLastDivers($event.checked)" [checked]="useLast.divers">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Accessoires</mat-label>
                    <input matInput formControlName="accessoires">
                    <mat-error *ngIf="this.jumpForm.controls['accessoires'].status === 'INVALID'">{{getErrorMessage('accessoires')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Zone</mat-label>
                    <input matInput formControlName="zone">
                    <mat-error *ngIf="this.jumpForm.controls['zone'].status === 'INVALID'">{{getErrorMessage('zone')}}</mat-error>
                </mat-form-field>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Groupe
                    <mat-checkbox class="float-end" (change)="setLastGroupe($event.checked)" [checked]="useLast.groupe">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Sautants</mat-label>
                    <input matInput placeholder="Ajouter un sautant" [formControl]="tagField" (keyup.enter)="addSautant()">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Nombre de participants</mat-label>
                    <input matInput formControlName="participants" type="number" min="0" step="1">
                    <mat-error *ngIf="this.jumpForm.controls['participants'].status === 'INVALID'">{{getErrorMessage('participants')}}</mat-error>
                </mat-form-field>
                <div class="mb-2">
                    <span *ngFor="let sautant of jump.sautants" class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle pointer me-1" fontIcon="close" (click)="removeSautant(sautant)"></mat-icon>
                        {{ sautant }}
                    </span>
                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle pointer me-1" fontIcon="person"></mat-icon>
                        ju_solide
                    </span>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Programme
                    <mat-checkbox class="float-end" (change)="setLastProgramme($event.checked)" [checked]="useLast.programme">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2 w-100" color="warn">
                    <mat-label>Programme</mat-label>
                    <textarea matInput formControlName="programme"></textarea>
                    <mat-error *ngIf="this.jumpForm.controls['programme'].status === 'INVALID'">{{getErrorMessage('programme')}}</mat-error>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">Vidéo</h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Dossier</mat-label>
                    <input matInput formControlName="dossier">
                    <mat-error *ngIf="this.jumpForm.controls['dossier'].status === 'INVALID'">{{getErrorMessage('dossier')}}</mat-error>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Video</mat-label>
                    <input matInput formControlName="video">
                    <mat-error *ngIf="this.jumpForm.controls['video'].status === 'INVALID'">{{getErrorMessage('video')}}</mat-error>
                </mat-form-field>
                <span class="d-inline-block align-middle ms-1">{{ filepath }}{{ filename }}</span>
            </div>
        </form>
        <div class="row" [hidden]="true">
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Dropzone
                    <mat-checkbox class="float-end" (change)="setLastDropzone($event.checked)" [(ngModel)]="useLast.dropzone">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Lieu</mat-label>
                    <input matInput [(ngModel)]="jump.lieu">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2" color="warn">
                    <mat-label>Oaci</mat-label>
                    <input matInput [(ngModel)]="jump.oaci">
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Aéronef
                    <mat-checkbox class="float-end" (change)="setLastAeronef($event.checked)" [(ngModel)]="useLast.aeronef">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Aéronef</mat-label>
                    <input matInput [(ngModel)]="jump.aeronef">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Imatriculation</mat-label>
                    <input matInput [(ngModel)]="jump.imat">
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Voile
                    <mat-checkbox class="float-end" (change)="setLastVoile($event.checked)" [(ngModel)]="useLast.voile">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Modèle</mat-label>
                    <input matInput [(ngModel)]="jump.voile">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Taille</mat-label>
                    <input matInput [(ngModel)]="jump.taille" type="number" min="0" step="1">
                </mat-form-field>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Altitude
                    <mat-checkbox class="float-end" (change)="setLastAltitude($event.checked)" [(ngModel)]="useLast.altitude">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Hauteur</mat-label>
                    <input matInput [(ngModel)]="jump.hauteur" type="number" min="0" step="1">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Hauteur de déploiement</mat-label>
                    <input matInput [(ngModel)]="jump.deploiement" type="number" min="0" step="1">
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Discipline
                    <mat-checkbox class="float-end" (change)="setLastDiscipline($event.checked)" [(ngModel)]="useLast.discipline">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Categorie</mat-label>
                    <input matInput [(ngModel)]="jump.categorie">
                    <mat-hint>FF / Solo / VR / Wingsuit</mat-hint>
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Module</mat-label>
                    <input matInput [(ngModel)]="jump.module">
                    <mat-hint>Chutas / Track / Trace</mat-hint>
                </mat-form-field>
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Divers
                    <mat-checkbox class="float-end" (change)="setLastDivers($event.checked)" [(ngModel)]="useLast.divers">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Accessoires</mat-label>
                    <input matInput [(ngModel)]="jump.accessoires">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Zone</mat-label>
                    <input matInput [(ngModel)]="jump.zone">
                </mat-form-field>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Groupe
                    <mat-checkbox class="float-end" (change)="setLastGroupe($event.checked)" [(ngModel)]="useLast.groupe">
                        <mat-icon fontIcon="history" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Sautants</mat-label>
                    <input matInput type="text" placehomder="Ajouter un sautant" [formControl]="tagField" (keyup.enter)="addSautant()">
                </mat-form-field>
                <mat-form-field appearance="fill" class="me-2">
                    <mat-label>Nombre de participants</mat-label>
                    <input matInput [(ngModel)]="jump.participants" type="number" min="0" step="1" [value]="jump.sautants.length+1">
                </mat-form-field>
                <div class="mb-2">
                    <span *ngFor="let sautant of jump.sautants" class="badge rounded-pill bg-primary mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle pointer me-1" fontIcon="close" (click)="removeSautant(sautant)"></mat-icon>
                        {{ sautant }}
                    </span>
                    <span class="badge rounded-pill bg-accent mb-2 me-1 pe-3 py-1 fw-normal text-dark">
                        <mat-icon class="align-middle pointer me-1" fontIcon="person"></mat-icon>
                        ju_solide
                    </span>
                </div>
            </div>
            <div class="col-lg-6 col-md-12">
                <h4 class="border-bottom border-secondary mb-3 lh-lg">
                    Programme
                    <mat-checkbox class="float-end" [(ngModel)]="params.video">
                        <mat-icon fontIcon="videocam" class="align-middle"></mat-icon>
                    </mat-checkbox>
                </h4>
                <mat-form-field appearance="fill" class="me-2 w-100">
                    <mat-label>Programme</mat-label>
                    <textarea matInput [(ngModel)]="jump.programme"></textarea>
                </mat-form-field>
                <span class="d-inline-block align-middle ms-1">{{ filepath }}{{ this.jumpForm.controls['date'].value | date: 'yyyy-MM-dd' }}_S00{{ nextJump }}.mp4</span>
                <span class="d-inline-block align-middle ms-1">{{ jump.dossier }}{{ jump.video }}</span>
            </div>
        </div>
    </div>
</mat-dialog-content>
<mat-dialog-actions>
    <span class="flex-spacer"></span>
    <button mat-button (click)="closeDialog()" class="me-1">Annuler</button>
    <!--<button mat-button color="warn" [disabled]="!jumpForm.valid" [mat-dialog-close]="{jump: jump, params: params}" cdkFocusInitial>Enregistrer</button>-->
    <button mat-button color="warn" [disabled]="!jumpForm.valid"  (click)="submitForm()" cdkFocusInitial>Enregistrer</button>
</mat-dialog-actions>