<div class="col-sm-12 form-section-title"> Build method </div>
<box-selector radio-name="'method'" value="$ctrl.state.Method" options="$ctrl.methodOptions" on-change="($ctrl.onChangeMethod)"></box-selector>

<web-editor-form
  ng-if="$ctrl.state.Method === 'editor'"
  identifier="stack-creation-editor"
  value="$ctrl.formValues.StackFileContent"
  on-change="($ctrl.onChangeFileContent)"
  ng-required="true"
  yml="true"
  placeholder="# Define or paste the content of your docker compose file here"
>
  <editor-description>
    You can get more information about Compose file format in the
    <a href="https://docs.docker.com/compose/compose-file/" target="_blank"> official documentation </a>
    .
  </editor-description>
</web-editor-form>

<file-upload-form ng-if="$ctrl.state.Method === 'upload'" file="$ctrl.formValues.StackFile" on-change="($ctrl.onChangeFile)" ng-required="true">
  <file-upload-description> You can upload a Compose file from your computer. </file-upload-description>
</file-upload-form>

<git-form ng-if="$ctrl.state.Method === 'repository'" model="$ctrl.formValues" on-change="($ctrl.onChangeFormValues)"></git-form>

<!-- template -->
<div ng-if="$ctrl.state.Method === 'template'">
  <div class="form-group">
    <label for="stack_template" class="col-sm-1 control-label text-left"> Template </label>
    <div class="col-sm-11">
      <select
        class="form-control"
        ng-model="$ctrl.selectedTemplate"
        ng-options="template as template.label for template in $ctrl.templates"
        ng-change="$ctrl.onChangeTemplate($ctrl.selectedTemplate)"
      >
        <option value="" label="Select an Edge stack template" disabled selected="selected"> </option>
      </select>
    </div>
  </div>
  <!-- description -->
  <div ng-if="$ctrl.selectedTemplate.note">
    <div class="col-sm-12 form-section-title"> Information </div>
    <div class="form-group">
      <div class="col-sm-12">
        <div class="template-note" ng-bind-html="$ctrl.selectedTemplate.note"></div>
      </div>
    </div>
  </div>
  <!-- !description -->

  <web-editor-form
    ng-if="$ctrl.selectedTemplate && $ctrl.formValues.StackFileContent"
    identifier="template-content-editor"
    value="$ctrl.formValues.StackFileContent"
    on-change="($ctrl.onChangeFileContent)"
    yml="true"
    placeholder="# Define or paste the content of your docker compose file here"
    ng-required="true"
  >
  </web-editor-form>

  <!-- !template -->
</div>
