<page-header title="'Create stack'" breadcrumbs="[{label:'Stacks', link:'docker.stacks'}, 'Add stack']"> </page-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"
                name="stack_name"
                placeholder="e.g. mystack"
                auto-focus
                ng-pattern="STACK_NAME_VALIDATION_REGEX"
              />
            </div>
          </div>
          <div class="form-group" ng-show="createStackForm.stack_name.$invalid">
            <div class="col-sm-12 small text-warning">
              <div ng-messages="createStackForm.stack_name.$error">
                <p ng-message="pattern">
                  <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
                  <span>This field must consist of lower case alphanumeric characters, '_' or '-' (e.g. 'my-name', or 'abc-123').</span>
                </p>
              </div>
            </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 class="col-sm-12">
              <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">
                      <pr-icon icon="'edit'" feather="true"></pr-icon>
                      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">
                      <pr-icon icon="'upload'" feather="true"></pr-icon>
                      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">
                      <pr-icon icon="'git-pull-request'" feather="true"></pr-icon>
                      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">
                      <pr-icon icon="'edit'" feather="true"></pr-icon>
                      Custom template
                    </div>
                    <p>Use a custom template</p>
                  </label>
                </div>
              </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-light" ngf-select="uploadFile($file)">
                  <pr-icon icon="'upload'" feather="true"></pr-icon>
                  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-force-pull-image="true"
            show-auth-explanation="true"
            path-text-title="Compose path"
            path-placeholder="docker-compose.yml"
          ></git-form>

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

            <custom-templates-variables-field
              ng-if="isTemplateVariablesEnabled && state.selectedTemplate"
              definitions="state.selectedTemplate.Variables"
              value="formValues.Variables"
              on-change="(onChangeTemplateVariables)"
            ></custom-templates-variables-field>
          </div>

          <web-editor-form
            ng-if="state.Method === 'editor' || (state.Method === 'template' && state.selectedTemplateId)"
            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>

          <div ng-if="state.Method !== 'repository' && isAdmin && applicationState.endpoint.type !== 4">
            <div class="col-sm-12 form-section-title">
              Webhooks
              <por-switch-field
                name="EnableWebhook"
                checked="formValues.EnableWebhook"
                label-class="'col-sm-2'"
                tooltip="'Create a webhook (or callback URI) to automate the update of this stack. Sending a POST request to this callback URI (without requiring any authentication) will pull the most up-to-date version of the associated image and re-deploy this stack.'"
                label="'Create a Stack webhook'"
                on-change="(onEnableWebhookChange)"
                feature-id="'stack-webhook'"
              ></por-switch-field>
            </div>
          </div>

          <!-- 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"
                analytics-on
                analytics-category="docker"
                analytics-event="docker-stack-create"
                analytics-properties="buildAnalyticsProperties()"
              >
                <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>
