{{#if loading}}
  <section class="row mt-10">
    <div class="text-center">
      <i class="icon icon-spinner icon-spin" style="font-size:36px;"></i>
    </div>
  </section>
{{else}}
  <div class="row mt-10">
    <div class="col span-6">
      <label class="acc-label pb-5">
        {{t "newPipelineStep.stepType.applyApp.catalog.label"}}{{field-required}}
      </label>
      {{searchable-select
        class="form-control"
        content=catalogs
        allowCustom=true
        value=selectedCatalog
        optionValuePath="id"
        optionLabelPath="name"
      }}
    </div>
    <div class="col span-6">
      <label class="acc-label pb-5">
        {{t "newPipelineStep.stepType.applyApp.catalogTemplate.label"}}{{field-required}}
      </label>
      {{searchable-select
        class="form-control"
        content=apps
        allowCustom=true
        value=config.applyAppConfig.catalogTemplate
        optionValuePath="id"
        optionLabelPath="name"
      }}
      <p class="text-info text-small m-0">
        {{t "newPipelineStep.stepType.applyApp.catalogTemplate.helpText"}}
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label pb-5">
        {{t "newPipelineStep.stepType.applyApp.version.label"}}{{field-required}}
      </label>
      {{searchable-select
        class="form-control"
        content=versions
        allowCustom=true
        value=config.applyAppConfig.version
        optionValuePath="id"
        optionLabelPath="name"
      }}
      <p class="text-info text-small m-0">
        {{t "newPipelineStep.stepType.applyApp.version.helpText"}}
      </p>
    </div>
    <div class="col span-6">
      {{form-namespace
        namespace=namespace
        editing=true
      }}
      <p class="text-info text-small m-0">
        {{t "newPipelineStep.stepType.applyApp.targetNamespace.helpText"}}
      </p>
    </div>
  </div>
  <div class="row">
    <div class="col span-6">
      <label class="acc-label pb-5">
        {{t "newPipelineStep.stepType.applyApp.name.label"}}{{field-required}}
      </label>
      {{input
        class="form-control"
        value=config.applyAppConfig.name
        placeholder=(t "newPipelineStep.stepType.applyApp.name.placeholder")
      }}
    </div>
  </div>
  <div>
    {{form-key-value
      initialMap=config.applyAppConfig.answers
      changed=(action (mut config.applyAppConfig.answers))
      header=(t "newCatalog.answers.label")
      addActionLabel="newCatalog.answers.addAction"
    }}
  </div>
  {{#advanced-section}}
    {{pipeline-condition type="step" config=config.when}}
  {{/advanced-section}}
  {{top-errors errors=errors}}
  {{save-cancel
    saveDisabled=state.saveDisabled
    editing=editing
    createLabel="generic.add"
    save=(action "save")
    cancel=(action "cancel")
  }}
{{/if}}
