<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">
        <!-- description -->
        <div ng-if="$ctrl.template.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.template.Note"></div>
            </div>
          </div>
        </div>
        <!-- !description -->
        <div class="col-sm-12 form-section-title">
          Configuration
        </div>
        <!-- name-input -->
        <div class="form-group">
          <label for="container_name" class="col-sm-2 control-label text-left">Name</label>
          <div class="col-sm-10">
            <input type="text" name="container_name" class="form-control" ng-model="$ctrl.formValues.name" placeholder="e.g. myStack" required />
          </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" position="bottom" message="{{ var.description }}"></portainer-tooltip>
          </label>
          <div class="col-sm-10">
            <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="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.formValues.name || !$ctrl.state.deployable"
              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-sm btn-default" ng-click="$ctrl.unselectTemplate($ctrl.template)">Hide</button>
            <div class="cols-sm-12 small text-danger" ng-if="$ctrl.state.formValidationError" style="margin-left: 5px; margin-top: 5px;">{{ $ctrl.state.formValidationError }}</div>
            <div class="cols-sm-12 small text-danger" ng-if="!$ctrl.state.deployable" style="margin-left: 5px; margin-top: 5px;"
              >This template type cannot be deployed on this endpoint.</div
            >
          </div>
        </div>
        <!-- !actions -->
      </form>
    </rd-widget-body>
  </rd-widget>
</div>
