<form
  class="c8y-wizard-form text-left"
  name="appDeployForm"
  (ngSubmit)="(formGroup.valid)"
  [formGroup]="formGroup"
  novalidate
>
  <c8y-form-group>
    <label
      for="name"
      translate
    >
      Name
    </label>
    <input
      class="form-control"
      placeholder="{{ 'e.g. My application' | translate }}"
      name="name"
      type="text"
      required
      formControlName="name"
    />
  </c8y-form-group>
  <c8y-form-group>
    <label
      for="key"
      translate
    >
      Application key
    </label>
    <input
      class="form-control"
      placeholder="{{ 'e.g. my-application-key' | translate }}"
      name="key"
      type="text"
      required
      formControlName="key"
    />
  </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"
        placeholder="{{ 'e.g. my-application' | translate }}"
        name="contextPath"
        type="text"
        required
        formControlName="contextPath"
      />
    </div>
  </c8y-form-group>
  <c8y-form-group>
    <label>{{ 'Select icon' | translate }}</label>
    <c8y-icon-selector-wrapper
      name="icon"
      formControlName="icon"
    ></c8y-icon-selector-wrapper>
  </c8y-form-group>
</form>