<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>

  <form
    class="formNewJumps"
    (ngSubmit)="onFormSubmit()"
    *ngIf="notLoadingToDisplay(); else loading"
  >
    <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"
      >
        <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
          {{ jumpType.name }}
        </mat-option>
      </mat-autocomplete>
      <button
        *ngIf="selectedJumpType"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="selectedJumpType = undefined"
      >
        <mat-icon>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"
      >
        <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
          {{ aircraft.name }}
        </mat-option>
      </mat-autocomplete>
      <button
        *ngIf="selectedAircraft"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="selectedAircraft = undefined"
      >
        <mat-icon>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"
      >
        <mat-option
          *ngFor="let dropZone of listOfFilteredDropZone"
          [value]="dropZone"
        >
          {{ dropZone.name }}
          <mat-icon
            aria-hidden="false"
            aria-label="Favorite"
            *ngIf="dropZone.isFavorite === true"
            color="primary"
          >
            favorite</mat-icon
          >
        </mat-option>
      </mat-autocomplete>
      <button
        *ngIf="selectedDz"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="resetDz()"
      >
        <mat-icon>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"
      >
        <mat-option *ngFor="let gear of listOfGear" [value]="gear">
          {{ gear.name }} ({{ gear.mainCanopy }})
        </mat-option>
      </mat-autocomplete>
      <button
        *ngIf="selectedGear"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="selectedGear = undefined"
      >
        <mat-icon>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"
      />
      <button
        *ngIf="exitAltitude"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="exitAltitude = undefined"
      >
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>
    <mat-form-field>
      <input
        matInput
        placeholder="{{ 'NewJump_DeployAlt' | translate }}"
        [(ngModel)]="deployAltitude"
        name="deployAltitude"
        type="number"
      />
      <button
        *ngIf="deployAltitude"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="deployAltitude = undefined"
      >
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field>
      <input
        matInput
        placeholder="{{ 'NewJump_Count' | translate }}"
        [(ngModel)]="countOfJumps"
        name="countOfJumps"
        type="number"
      />
      <button
        *ngIf="countOfJumps"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="countOfJumps = undefined"
      >
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <mat-form-field>
      <textarea
        matInput
        placeholder="{{ 'NewJump_Comments' | translate }}"
        [(ngModel)]="comments"
        name="comments"
        type="text"
      ></textarea>
      <button
        *ngIf="comments"
        matSuffix
        mat-icon-button
        aria-label="Clear"
        (click)="comments = undefined"
      >
        <mat-icon>close</mat-icon>
      </button>
    </mat-form-field>

    <br />
    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
      {{ "NewJump_Submit" | translate }}
    </button>
  </form>

  <ng-template #loading>
    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
  </ng-template>
</div>
