portainer/portainer

<form class="form-horizontal" name="EdgeGroupForm" ng-submit="$ctrl.handleSubmit()">
  <div class="form-group">
    <label for="group_name" class="col-sm-3 col-lg-2 control-label required text-left"> Name </label>
    <div class="col-sm-9 col-lg-10">
      <input
        type="text"
        data-cy="edgeGroupCreate-groupNameInput"
        class="form-control"
        id="group_name"
        name="group_name"
        ng-model="$ctrl.model.Name"
        required
        auto-focus
        placeholder="e.g. mygroup"
      />
      <div class="help-block" ng-show="EdgeGroupForm.group_name.$invalid">
        <div class="small text-warning">
          <div ng-messages="EdgeGroupForm.group_name.$error">
            <p ng-message="required" class="vertical-center"> <pr-icon icon="'alert-triangle'" class-name="'icon-sm icon-warning'"></pr-icon> This field is required. </p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="col-sm-12 form-section-title"> Group type </div>

  <box-selector slim="true" value="$ctrl.model.Dynamic" on-change="($ctrl.onChangeDynamic)" options="$ctrl.groupTypeOptions" radio-name="'groupTypeDynamic'"></box-selector>

  <!-- StaticGroup -->
  <div ng-if="!$ctrl.model.Dynamic">
    <div ng-if="!$ctrl.noEndpoints">
      <!-- environments -->
      <div class="col-sm-12 form-section-title"> Associated environments </div>
      <div class="form-group">
        <associated-edge-environments-selector value="$ctrl.model.Endpoints" on-change="($ctrl.onChangeEnvironments)"></associated-edge-environments-selector>
      </div>
    </div>
    <div class="form-group" ng-if="$ctrl.noEndpoints">
      <div class="col-sm-12 small text-muted">
        No Edge environments are available. Head over to the <a ui-sref="portainer.endpoints">Environments view</a> to add environments.
      </div>
    </div>
  </div>
  <!-- !StaticGroup -->

  <!-- DynamicGroup -->
  <div ng-if="$ctrl.model.Dynamic">
    <div class="col-sm-12 form-section-title"> Tags </div>

    <box-selector slim="true" value="$ctrl.model.PartialMatch" on-change="($ctrl.onChangePartialMatch)" options="$ctrl.tagOptions" radio-name="'partialMatch'"></box-selector>

    <tag-selector ng-if="$ctrl.model.TagIds" value="$ctrl.model.TagIds" on-change="($ctrl.onChangeTags)"> </tag-selector>

    <edge-group-association-table
      title="'Associated environments by tags'"
      empty-content-message="'No associated available'"
      query="$ctrl.dynamicQuery"
    ></edge-group-association-table>
  </div>
  <!-- !DynamicGroup -->

  <!-- actions -->
  <div class="col-sm-12 form-section-title"> Actions </div>
  <div class="form-group">
    <div class="col-sm-12">
      <button
        type="submit"
        class="btn btn-primary btn-sm"
        ng-disabled="$ctrl.actionInProgress || !EdgeGroupForm.$valid"
        button-spinner="$ctrl.actionInProgress"
        data-cy="edgeGroupCreate-addGroupButton"
      >
        <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
        <span ng-show="$ctrl.actionInProgress">In progress...</span>
      </button>
    </div>
  </div>
</form>