Untitled

<div *ngIf="horse">
<h1 class="display-1">{{heading}}</h1>


<form #form="ngForm" (ngSubmit)="onSubmit(form)">
  <div class="row">
    <!-- Start name and date of birth row -->
    <div class="mb-2 col-lg-6">
      <!-- When nesting rows, always make row > col-* > row. The Bootstrap classes do not work right when an element is both col* and row -->
      <div class="row">
        <label for="horseName" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
          Name
        </label>
        <div class="col-md-10 col-lg-8"
             >
          <input type="text"
                 id="horseName"
                 name="horseName"
                 placeholder="Horse name"
                 class="form-control"
                 [class]="dynamicCssClassesForInput(horseNameModel)"
                 [(ngModel)]="horse.name"
                 #horseNameModel="ngModel"
                 required
                 >
          <div class="invalid-feedback">
            <!-- This is shown, when the form validation deems the name input to be invalid -->
            Name is required
          </div>
        </div>
      </div>
    </div>
    <div class="mb-2 col-lg-6">
      <div class="row">
        <label for="horseDateOfBirth" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
          Date of Birth
        </label>
        <div class="col-md-10 col-lg-8"
             >
          <input type="date"
                 id="horseDateOfBirth"
                 name="horseDateOfBirth"
                 class="form-control"
                 [class]="dynamicCssClassesForInput(horseDateOfBirthModel)"
                 [(ngModel)]="horse.dateOfBirth"
                 #horseDateOfBirthModel="ngModel"
                 required
                 >
          <div class="invalid-feedback">
            Date of birth is required
          </div>
        </div>
      </div>
    </div>
    <!-- End name and date of birth row -->
  </div>

  <div class="row">
    <!-- Start sex and owner row -->
    <div class="mb-2 col-lg-6">
      <div class="row">
        <label for="horseSex" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
          Sex
        </label>
        <div class="col-md-10 col-lg-8"
             >
          <select class="form-select"
                  id="horseSex"
                name="horseSex"
                  [(ngModel)]="horse.sex"
                  required
                  >
            <option value="FEMALE">Female</option>
            <option value="MALE">Male</option>
          </select>
        </div>
      </div>
    </div>


    <div class="mb-2 col-lg-6">
      <div class="row">
        <label for="horseOwner" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
          Owner
        </label>
        <app-autocomplete
          id="horseOwner"
          name="horseOwner"
          class="col-md-10 col-lg-8"
          textInputClass="form-control"
          valueNeedsToMatchSuggestion="true"
          [(ngModel)]="horse.owner"
          [formatModel]="formatOwnerName"
          [suggestions]="ownerSuggestions"
          ></app-autocomplete>
      </div>
    </div>
    <!-- End sex and owner row -->
  </div>

<div class="row">
  <!-- Start sex and owner row -->
  <div class="mb-2 col-lg-6">
    <div class="row">
      <label for="horseMother" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
        Mother
      </label>
      <div class="col-md-10 col-lg-8"
      >
      <app-autocomplete
                id="horseMother"
                name="horseMother"
                class="col-md-10 col-lg-8"
                textInputClass="form-control"
                valueNeedsToMatchSuggestion="true"
                [(ngModel)]="horse.mother"
        >
        ></app-autocomplete>
      </div>
    </div>
  </div>


  <div class="mb-2 col-lg-6">
    <div class="row">
      <label for="horseFather" class="col-form-label text-md-end text-muted col-md-2 col-lg-4">
        Father
      </label>
      <app-autocomplete
        id="horseFather"
        name="horseFather"
        class="col-md-10 col-lg-8"
        textInputClass="form-control"
        valueNeedsToMatchSuggestion="true"
        [(ngModel)]="horse.father"
      ></app-autocomplete>
    </div>
  </div>
  <!-- End father and mother row -->
</div>

  <div class="row">
    <!-- No row and col-* here. We want this to always span the whole width. -->
    <label for="horseDescription" class="col-form-label text-md-end text-md-end text-muted col-md-2">
      Description
    </label>
    <div class="col-md-10"
         >
      <textarea class="form-control"
                id="horseDescription"
                name="horseDescription"
                [(ngModel)]="horse.description"
                >
      </textarea>
    </div>
  </div>

  <div class="mt-4 d-flex flex-row">
    <button type="button"
            class="btn btn-danger" (click)="openConfirmationDialog()"
            *ngIf="!modeIsCreate"
            >
      <i class="bi bi-trash"></i>
      Delete
    </button>
    <span class="flex-grow-1"></span>
    <button type="submit"
            class="btn btn-primary"
            [disabled]="!form.valid"
            *ngIf="!modeIsCreate"
            type="submit"
            >
      Save
    </button>
    <button type="submit"
            class="btn btn-primary"
            [disabled]="!form.valid"
            *ngIf="modeIsCreate"
            type="submit"
    >
      Create
    </button>
  </div>