<rd-header>
  <rd-header-title title-text="Create stack"></rd-header-title>
  <rd-header-content> <a ui-sref="docker.stacks">Stacks</a> &gt; Add stack </rd-header-content>
</rd-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="createStackForm">
          <!-- name-input -->
          <div class="form-group">
            <label for="stack_name" class="col-sm-1 control-label text-left">Name</label>
            <div class="col-sm-11">
              <input type="text" class="form-control" ng-model="formValues.Name" id="stack_name" placeholder="e.g. mystack" auto-focus />
            </div>
          </div>
          <!-- !name-input -->
          <div class="form-group">
            <span class="col-sm-12 text-muted small" ng-if="state.StackType === 1">
              This stack will be deployed using the equivalent of the <code>docker stack deploy</code> command.
            </span>
            <div class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion == 2">
              <div style="margin-bottom: 7px;">
                This stack will be deployed using the equivalent of <code>docker-compose</code>. Only Compose file format version <b>2</b> is supported at the moment.
              </div>
              <i class="fa fa-exclamation-circle orange-icon" aria-hidden="true" style="margin-right: 2px;"></i>
              Note: Due to a limitation of libcompose, the name of the stack will be standardized to remove all special characters and uppercase letters.
            </div>
            <span class="col-sm-12 text-muted small" ng-if="state.StackType === 2 && composeSyntaxMaxVersion > 2">
              This stack will be deployed using <code>docker-compose</code>.
            </span>
          </div>
          <!-- build-method -->
          <div class="col-sm-12 form-section-title">
            Build method
          </div>
          <div class="form-group"></div>
          <div class="form-group" style="margin-bottom: 0;">
            <div class="boxselector_wrapper">
              <div>
                <input type="radio" id="method_editor" ng-model="state.Method" value="editor" />
                <label for="method_editor">
                  <div class="boxselector_header">
                    <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                    Web editor
                  </div>
                  <p>Use our Web editor</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_upload" ng-model="state.Method" value="upload" />
                <label for="method_upload">
                  <div class="boxselector_header">
                    <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
                    Upload
                  </div>
                  <p>Upload from your computer</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_repository" ng-model="state.Method" value="repository" />
                <label for="method_repository">
                  <div class="boxselector_header">
                    <i class="fab fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
                    Repository
                  </div>
                  <p>Use a git repository</p>
                </label>
              </div>
              <div>
                <input type="radio" id="method_template" ng-model="state.Method" value="template" />
                <label for="method_template">
                  <div class="boxselector_header">
                    <i class="fa fa-rocket" aria-hidden="true" style="margin-right: 2px;"></i>
                    Custom template
                  </div>
                  <p>Use a custom template</p>
                </label>
              </div>
            </div>
          </div>
          <!-- !build-method -->

          <!-- upload -->
          <div ng-show="state.Method === 'upload'">
            <div class="col-sm-12 form-section-title">
              Upload
            </div>
            <div class="form-group">
              <span class="col-sm-12 text-muted small">
                You can upload a Compose file from your computer.
              </span>
              <div class="col-sm-12" ng-if="state.uploadYamlValidationError"
                ><span class="text-danger small">{{ state.uploadYamlValidationError }}</span></div
              >
            </div>
            <div class="form-group">
              <div class="col-sm-12">
                <button type="button" class="btn btn-sm btn-primary" ngf-select="uploadFile($file)">Select file</button>
                <span style="margin-left: 5px;">
                  {{ formValues.StackFile.name }}
                  <i class="fa fa-times red-icon" ng-if="!formValues.StackFile" aria-hidden="true"></i>
                </span>
              </div>
            </div>
          </div>
          <!-- !upload -->
          <git-form
            ng-if="state.Method === 'repository'"
            model="formValues"
            on-change="(onChangeFormValues)"
            additional-file="true"
            auto-update="true"
            show-auth-explanation="true"
          ></git-form>

          <custom-template-selector
            ng-show="state.Method === 'template'"
            new-template-path="docker.templates.custom.new"
            stack-type="state.StackType"
            on-change="(onChangeTemplateId)"
            value="state.templateId"
          ></custom-template-selector>

          <web-editor-form
            ng-if="state.Method === 'editor' || (state.Method === 'template' && state.templateId)"
            identifier="stack-creation-editor"
            value="formValues.StackFileContent"
            on-change="(onChangeFileContent)"
            ng-required="true"
            yml="true"
            placeholder="# Define or paste the content of your docker-compose file here"
          >
            <editor-description>
              <span class="col-sm-12 text-muted small">
                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>.
              </span>
              <div class="col-sm-12" ng-if="state.editorYamlValidationError">
                <span class="text-danger small">{{ state.editorYamlValidationError }}</span>
              </div>
            </editor-description>
          </web-editor-form>

          <!-- environment-variables -->
          <environment-variables-panel ng-model="formValues.Env" explanation="These values will be used as substitutions in the stack file" on-change="(handleEnvVarChange)">
          </environment-variables-panel>
          <!-- !environment-variables -->
          <por-access-control-form form-data="formValues.AccessControlData"></por-access-control-form>
          <!-- actions -->
          <div class="col-sm-12 form-section-title">
            Actions
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="state.actionInProgress
              || !createStackForm.$valid
              || ((state.Method === 'editor' || state.Method === 'template') && (!formValues.StackFileContent || state.editorYamlValidationError))
              || (state.Method === 'upload' && (!formValues.StackFile || state.uploadYamlValidationError))
              || (state.Method === 'repository' && ((!formValues.RepositoryURL || !formValues.ComposeFilePathInRepository) || (formValues.RepositoryAuthentication && !formValues.RepositoryPassword)))
              || !formValues.Name"
                ng-click="deployStack()"
                button-spinner="state.actionInProgress"
              >
                <span ng-hide="state.actionInProgress">Deploy the stack</span>
                <span ng-show="state.actionInProgress">Deployment in progress...</span>
              </button>
              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px;">{{ state.formValidationError }}</span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
