<div class="content">
    <div>
        <button
            mat-raised-button
            color="accent"
            [routerLink]="['/jumps']"
            [routerLinkActive]="['active']"
            skipLocationChange
        >
            {{ "NewJump_GoToJump" | translate }}
        </button>
        <p>
            <mat-checkbox [(ngModel)]="resetForm" labelPosition="before">{{
                "NewJump_ResetForm" | translate
            }}</mat-checkbox>
        </p>
    </div>

    @if (notLoadingToDisplay()) {
        <form class="formNewJumps" (ngSubmit)="onFormSubmit()">
            <mat-form-field>
                <mat-label>{{
                    "NewJump_ChooseJumpType" | translate
                }}</mat-label>
                <input
                    type="text"
                    matInput
                    [matAutocomplete]="autoJumpType"
                    [(ngModel)]="selectedJumpType"
                    name="selectedJumpType"
                />
                <mat-autocomplete
                    #autoJumpType="matAutocomplete"
                    [displayWith]="displayNameFn"
                >
                    @for (jumpType of listOfJumpType; track jumpType) {
                        <mat-option [value]="jumpType">
                            {{ jumpType.name }}
                        </mat-option>
                    }
                </mat-autocomplete>
                @if (selectedJumpType) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="selectedJumpType = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{
                    "NewJump_ChooseAircraft" | translate
                }}</mat-label>
                <input
                    type="text"
                    matInput
                    [matAutocomplete]="autoAircraft"
                    [(ngModel)]="selectedAircraft"
                    name="selectedAircraft"
                />
                <mat-autocomplete
                    #autoAircraft="matAutocomplete"
                    [displayWith]="displayNameFn"
                >
                    @for (aircraft of listOfAircraft; track aircraft) {
                        <mat-option [value]="aircraft">
                            {{ aircraft.name }}
                        </mat-option>
                    }
                </mat-autocomplete>
                @if (selectedAircraft) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="selectedAircraft = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
                <input
                    type="text"
                    matInput
                    [matAutocomplete]="autoDropZone"
                    [(ngModel)]="selectedDz"
                    (ngModelChange)="onChangeDz($event)"
                    name="selectedDz"
                />
                <mat-autocomplete
                    #autoDropZone="matAutocomplete"
                    [displayWith]="displayNameFn"
                >
                    @for (dropZone of listOfFilteredDropZone; track dropZone) {
                        <mat-option [value]="dropZone">
                            {{ dropZone.name }}
                            @if (dropZone.isFavorite === true) {
                                <mat-icon
                                    aria-hidden="false"
                                    aria-label="Favorite"
                                    color="primary"
                                    svgIcon="favorite"
                                >
                                </mat-icon>
                            }
                        </mat-option>
                    }
                </mat-autocomplete>
                @if (selectedDz) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="resetDz()"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
                <input
                    type="text"
                    matInput
                    [matAutocomplete]="autoGear"
                    [(ngModel)]="selectedGear"
                    name="selectedGear"
                />
                <mat-autocomplete
                    #autoGear="matAutocomplete"
                    [displayWith]="displayGearFn"
                >
                    @for (gear of listOfGear; track gear) {
                        <mat-option [value]="gear">
                            {{ gear.name }} ({{ gear.mainCanopy }})
                        </mat-option>
                    }
                </mat-autocomplete>
                @if (selectedGear) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="selectedGear = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{
                "NewJump_Cutaway" | translate
            }}</mat-checkbox>
            <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{
                "NewJump_Special" | translate
            }}</mat-checkbox>
            <mat-form-field>
                <input
                    matInput
                    [matDatepicker]="beginDateDp"
                    [(ngModel)]="beginDate"
                    name="beginDate"
                    disabled
                    (ngModelChange)="onChangeBeginDate($event)"
                />
                <mat-datepicker-toggle
                    matSuffix
                    [for]="beginDateDp"
                ></mat-datepicker-toggle>
                <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <input
                    matInput
                    [matDatepicker]="endDateDp"
                    [(ngModel)]="endDate"
                    name="endDate"
                    disabled
                />
                <mat-datepicker-toggle
                    matSuffix
                    [for]="endDateDp"
                ></mat-datepicker-toggle>
                <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <input
                    matInput
                    placeholder="{{ 'NewJump_ExitAlt' | translate }}"
                    [(ngModel)]="exitAltitude"
                    name="exitAltitude"
                    type="number"
                />
                @if (exitAltitude) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="exitAltitude = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <input
                    matInput
                    placeholder="{{ 'NewJump_DeployAlt' | translate }}"
                    [(ngModel)]="deployAltitude"
                    name="deployAltitude"
                    type="number"
                />
                @if (deployAltitude) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="deployAltitude = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <input
                    matInput
                    placeholder="{{ 'NewJump_Count' | translate }}"
                    [(ngModel)]="countOfJumps"
                    name="countOfJumps"
                    type="number"
                />
                @if (countOfJumps) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="countOfJumps = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <textarea
                    matInput
                    placeholder="{{ 'NewJump_Comments' | translate }}"
                    [(ngModel)]="comments"
                    name="comments"
                    type="text"
                ></textarea>
                @if (comments) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="comments = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <br />
            @if (this.isValidatedForm()) {
                <button mat-raised-button color="accent">
                    {{ "NewJump_Submit" | translate }}
                </button>
            }
        </form>
    } @else {
        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    }
</div>
