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

    @if (notLoadingToDisplay()) {
        <form class="formNewJumps" (ngSubmit)="onFormSubmit()">
            <mat-form-field>
                <mat-label>{{
                    "NewTunnelFlight_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>{{
                    "NewTunnelFlight_ChooseTunnel" | translate
                }}</mat-label>
                <input
                    type="text"
                    matInput
                    [matAutocomplete]="autoDropZone"
                    [(ngModel)]="selectedTunnel"
                    (ngModelChange)="onChangeTunnel($event)"
                    name="selectedTunnel"
                />
                <mat-autocomplete
                    #autoDropZone="matAutocomplete"
                    [displayWith]="displayNameFn"
                >
                    @for (tunnel of listOfFilteredTunnel; track tunnel) {
                        <mat-option [value]="tunnel">
                            {{ tunnel.name }}
                        </mat-option>
                    }
                </mat-autocomplete>
                @if (selectedTunnel) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="resetTunnel()"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{
                    "NewTunnelFlight_Date_Lbl" | translate
                }}</mat-label>
                <input
                    matInput
                    [max]="maxDate"
                    [matDatepicker]="flightDateDp"
                    [(ngModel)]="flightDate"
                    name="flightDate"
                    disabled
                />
                <mat-datepicker-toggle
                    matSuffix
                    [for]="flightDateDp"
                ></mat-datepicker-toggle>
                <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{
                    "NewTunnelFlight_Minutes_Lbl" | translate
                }}</mat-label>
                <input
                    matInput
                    placeholder="{{ 'NewTunnelFlight_Minutes' | translate }}"
                    [(ngModel)]="minutesOfFlight"
                    name="minutesOfFlight"
                    type="number"
                />
                @if (minutesOfFlight) {
                    <button
                        matSuffix
                        mat-icon-button
                        aria-label="Clear"
                        (click)="minutesOfFlight = undefined"
                    >
                        <mat-icon svgIcon="close"></mat-icon>
                    </button>
                }
            </mat-form-field>
            <mat-form-field>
                <mat-label>{{
                    "NewTunnelFlight_Comments_Lbl" | translate
                }}</mat-label>
                <textarea
                    matInput
                    placeholder="{{ 'NewTunnelFlight_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">
                    {{ "NewTunnelFlight_Submit" | translate }}
                </button>
            }
        </form>
    } @else {
        <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
    }
</div>
