<page-header title="'Create Edge stack'" breadcrumbs="[{label:'Edge Stacks', link:'edge.stacks'}, 'Create Edge stack']"> </page-header>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.form">
          <!-- name-input -->
          <div class="form-group">
            <label for="stack_name" class="col-sm-1 control-label text-left required"> Name </label>
            <div class="col-sm-11">
              <input
                type="text"
                class="form-control"
                ng-model="$ctrl.formValues.Name"
                id="stack_name"
                name="nameField"
                placeholder="e.g. mystack"
                auto-focus
                required
                data-cy="edgeStackCreate-nameInput"
              />
              <div class="help-block" ng-show="$ctrl.form.$invalid">
                <div class="small text-warning">
                  <div ng-messages="$ctrl.form.$error">
                    <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> Name is required. </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- !name-input -->

          <div class="col-sm-12 form-section-title"> Edge Groups </div>
          <div class="form-group" ng-if="$ctrl.edgeGroups">
            <div class="col-sm-12">
              <edge-groups-selector ng-if="!$ctrl.noGroups" value="$ctrl.formValues.Groups" on-change="($ctrl.onChangeGroups)" items="$ctrl.edgeGroups"></edge-groups-selector>
            </div>
            <div ng-if="$ctrl.noGroups" class="col-sm-12 small text-muted">
              No Edge groups are available. Head over to the <a ui-sref="edge.groups">Edge groups view</a> to create one.
            </div>
            <p class="col-sm-12 vertical-center help-block small text-warning" ng-if="$ctrl.formValues.DeploymentType === undefined">
              <pr-icon icon="'alert-triangle'" mode="'warning'"></pr-icon> There are no available deployment types when there is more than one type of environment in your edge
              group selection (e.g. Kubernetes and Docker environments). Please select edge groups that have environments of the same type.
            </p>
          </div>

          <edge-stack-deployment-type-selector
            value="$ctrl.formValues.DeploymentType"
            has-docker-endpoint="$ctrl.hasDockerEndpoint()"
            has-kube-endpoint="$ctrl.hasKubeEndpoint()"
            on-change="($ctrl.onChangeDeploymentType)"
          ></edge-stack-deployment-type-selector>

          <edge-stacks-docker-compose-form
            ng-if="$ctrl.formValues.DeploymentType == $ctrl.EditorType.Compose"
            form-values="$ctrl.formValues"
            state="$ctrl.state"
          ></edge-stacks-docker-compose-form>

          <edge-stacks-kube-manifest-form
            ng-if="$ctrl.formValues.DeploymentType == $ctrl.EditorType.Kubernetes"
            form-values="$ctrl.formValues"
            state="$ctrl.state"
          ></edge-stacks-kube-manifest-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="$ctrl.state.actionInProgress || $ctrl.formIsInvalid()"
                ng-click="$ctrl.createStack()"
                button-spinner="$ctrl.state.actionInProgress"
                analytics-on
                analytics-event="edge-stack-creation"
                analytics-category="edge"
                analytics-properties="$ctrl.buildAnalyticsProperties()"
                data-cy="edgeStackCreate-createStackButton"
              >
                <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
                <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
              </button>
              <span class="text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px">
                {{ $ctrl.state.formValidationError }}
              </span>
            </div>
          </div>
          <!-- !actions -->
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
