<div class="col-sm-12">
  <rd-widget>
    <rd-widget-custom-header icon="$ctrl.template.Logo" title-text="$ctrl.template.Title"></rd-widget-custom-header>
    <rd-widget-body classes="padding">
      <form class="form-horizontal" name="stackTemplateForm">
        <!-- description -->
        <div ng-if="$ctrl.template.Note">
          <div class="form-section-title"> Information </div>
          <div class="col-sm-12 form-group">
            <div class="template-note" ng-bind-html="$ctrl.template.Note"></div>
          </div>
        </div>
        <!-- !description -->
        <div class="form-section-title"> Configuration </div>
        <!-- name-input -->
        <div class="form-group">
          <label for="template_name" class="col-sm-2 control-label text-left">Name</label>
          <div class="col-sm-6">
            <input type="text" name="template_name" class="form-control" ng-model="$ctrl.formValues.name" ng-pattern="$ctrl.nameRegex" placeholder="e.g. myStack" required />
          </div>
        </div>
        <div class="form-group" ng-if="stackTemplateForm.template_name.$invalid">
          <div class="col-sm-12 small text-warning">
            <div ng-messages="stackTemplateForm.template_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>
              <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
            </div>
          </div>
        </div>
        <!-- !name-input -->
        <!-- env -->
        <div ng-repeat="var in $ctrl.template.Env" ng-if="!var.preset || var.select" class="form-group">
          <label for="field_{{ $index }}" class="col-sm-2 control-label text-left">
            {{ var.label }}
            <portainer-tooltip ng-if="var.description" message="var.description"></portainer-tooltip>
          </label>
          <div class="col-sm-6">
            <input type="text" class="form-control" ng-if="!var.select" ng-model="var.value" id="field_{{ $index }}" />
            <select class="form-control" ng-if="var.select" ng-model="var.value" id="field_{{ $index }}">
              <option selected disabled hidden value="">Select value</option>
              <option ng-repeat="choice in var.select" value="{{ choice.value }}">{{ choice.text }}</option>
            </select>
          </div>
        </div>
        <!-- !env -->
        <ng-transclude ng-transclude-slot="advanced"></ng-transclude>

        <!-- access-control -->
        <por-access-control-form form-data="$ctrl.formValues.AccessControlData"></por-access-control-form>
        <!-- !access-control -->
        <!-- actions -->
        <div class="form-section-title"> Actions </div>
        <div class="form-group">
          <div class="col-sm-12">
            <button
              type="button"
              class="btn btn-primary"
              ng-disabled="$ctrl.state.actionInProgress || !$ctrl.formValues.name || !$ctrl.state.deployable || stackTemplateForm.$invalid"
              ng-click="$ctrl.createTemplate()"
              button-spinner="$ctrl.state.actionInProgress"
            >
              <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
              <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>
            </button>
            <button type="button" class="btn btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button>
            <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="$ctrl.state.formValidationError">{{ $ctrl.state.formValidationError }}</div>
            <div class="cols-sm-12 small text-danger space-left mt-1" ng-if="!$ctrl.state.deployable">This template type cannot be deployed on this environment.</div>
          </div>
        </div>
        <!-- !actions -->
      </form>
    </rd-widget-body>
  </rd-widget>
</div>
