<ng-form name="pathForm">
  <div class="form-group">
    <span class="col-sm-12 text-muted small"
      ><i class="fa fa-info-circle blue-icon space-right" aria-hidden="true"></i>Indicate the path to the {{ $ctrl.deployMethod == 'compose' ? 'Compose' : 'Manifest' }} file from
      the root of your repository (requires a yaml, yml, json, or hcl file extension)
    </span>
  </div>
  <div class="form-group">
    <label for="stack_repository_path" class="col-sm-2 control-label text-left">{{ $ctrl.deployMethod == 'compose' ? 'Compose' : 'Manifest' }} path</label>
    <div class="col-sm-10">
      <input
        type="text"
        class="form-control"
        name="repoPathField"
        ng-model="$ctrl.value"
        ng-change="$ctrl.onChange($ctrl.value)"
        id="stack_repository_path"
        placeholder="{{ $ctrl.deployMethod == 'compose' ? 'docker-compose.yml' : 'manifest.yml' }}"
        ng-pattern="/.+\.(yml|yaml|json|hcl)$/i"
        required
      />
      <p class="mt-10 text-warning" ng-show="pathForm.repoPathField.$error.pattern"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Invalid file path </p>
    </div>
  </div>
</ng-form>
