<div class="viewport-modal">
<div class="modal-header dialog-header" ng-show="title">
  <i c8y-icon="c8y-group-add"></i>
  <h4 id="modal-title" ng-bind="title | translate"></h4>
</div>
<div class="inner-scroll">
  <div class="modal-body" id="modal-body">
    <form name="forms.newGroupForm">
      <div class="form-group" ng-class="{ 'has-error': invalidName() }">
        <label>{{ 'New group name' | translate }}</label>
        <input
          type="text"
          name="name"
          class="form-control"
          placeholder="{{ 'e.g. My group' | translate }}"
          ng-model="newGroup.name"
          maxlength="{{ c8yConfig.validation.groupName.maxlength }}"
          required
        />
      </div>
    </form>
    <c8y-device-selector selected-devices="selectedDevices"></c8y-device-selector>
  </div>
</div>
<div class="modal-footer">
  <button
    title="{{ 'Cancel' | translate }}"
    type="button"
    class="btn btn-default"
    ng-click="dismiss()"
    translate
  >
    Cancel
  </button>
  <button
    title="{{ 'Create group' | translate }}"
    type="button"
    class="btn btn-primary"
    ng-disabled="forms.newGroupForm.$invalid"
    ng-click="create(selectedDevices)"
    translate
    translate-n="selectedDevices.length"
    translate-plural="Create group with {{ $count }} devices"
  >
    Create group with one device
  </button>
</div>
</div>
