<form [formGroup]="releaseForm" (ngSubmit)="formSubmit(releaseForm)">
  <ng-container *ngIf="releaseForm.get('version') as versionControl">
    <div class="form-group">
      <label for="appName">Select App</label>
      <select formControlName="app" class="form-control" id="appName">
        <option value="">--Choose--</option>
        <option *ngFor="let app of apps" [value]="app">{{ app }}</option>
      </select>
      <div
        [hidden]="
          releaseForm.get('app').valid || releaseForm.get('app').pristine
        "
        class="alert alert-danger"
      >
        Please choose an app
      </div>
    </div>
    <div class="form-group">
      <label for="versionNumber">Version Number</label>
      <input
        formControlName="version"
        type="text"
        class="form-control"
        id="versionNumber"
        aria-describedby="versionHelp"
        placeholder="Enter version number"
      />
      <small id="versionHelp" class="form-text text-muted"
        >Use semantic versioning (x.x.x)</small
      >
      <div
        [style.display]="
          releaseForm.get('version').getError('pattern') &&
          !releaseForm.get('version').pristine
            ? 'block'
            : 'none'
        "
        class="alert alert-danger"
      >
        Please write an appropriate version number
      </div>
    </div>
    <div
      *ngIf="
        versionControl.getError('newVersionRequired') &&
        !versionControl.pristine
      "
      class="alert alert-danger"
    >
      The version number should be greater than the last version '{{
        versionControl.errors['newVersionRequired']
      }}'
    </div>
    <button
      type="submit"
      [disabled]="releaseForm.invalid"
      class="btn btn-primary"
      *ngIf="versionControl.status !== 'PENDING'; else loader"
    >
      Submit
    </button>
  </ng-container>
  <ng-template #loader> Please wait... </ng-template>
</form>
