<form
  (ngSubmit)="(formGroup.valid)"
  [formGroup]="formGroup"
  class="c8y-wizard-form text-left"
  name="appDeployForm"
  novalidate
>
  <c8y-form-group>
    <label for="name" translate>Name</label>
    <input
      class="form-control"
      formControlName="name"
      name="name"
      placeholder="{{ 'e.g. My application' | translate }}"
      required
      type="text"
    />
    <c8y-messages>
      <c8y-message *ngIf="formGroup?.controls?.name?.errors?.required" translate>
        This field is required.
      </c8y-message>
    </c8y-messages>
  </c8y-form-group>
  <c8y-form-group>
    <label for="key" translate>Application key</label>
    <input
      class="form-control"
      formControlName="key"
      name="key"
      placeholder="{{ 'e.g. my-application-key' | translate }}"
      required
      type="text"
    />
    <c8y-messages>
      <c8y-message *ngIf="formGroup?.controls?.key?.errors?.required" translate>
        This field is required.
      </c8y-message>
    </c8y-messages>
  </c8y-form-group>
  <c8y-form-group>
    <label for="contextPath" translate>Path</label>
    <div class="input-group">
      <span class="input-group-addon">/apps/</span>
      <input
        class="form-control"
        formControlName="contextPath"
        name="contextPath"
        placeholder="{{ 'e.g. my-application' | translate }}"
        required
        type="text"
      />
    </div>
    <c8y-messages>
      <c8y-message *ngIf="formGroup?.controls?.contextPath?.errors?.required" translate>
        This field is required.
      </c8y-message>
    </c8y-messages>
  </c8y-form-group>
  <c8y-form-group *ngIf="isPackage">
    <label for="version" translate>Use package version</label>
    <div class="input-group">
      <input
        class="form-control"
        disabled
        formControlName="version"
        name="version"
        [placeholder]="'e.g. {{ example }}' | translate: { example: '1.0.0' }"
        type="text"
      />
    </div>
  </c8y-form-group>
</form>