<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'c8y-group-smart'"></i>
    <h4
      id="modal-title"
      translate
    >
      Add smart group
    </h4>
  </div>

  <form
    #createSmartGroup="ngForm"
    (ngSubmit)="createSmartGroup.form.valid && create()"
  >
    <div class="modal-inner-scroll">
      <div
        class="modal-body"
        id="modal-body"
      >
        <c8y-form-group>
          <label
            class="d-inline-block"
            for="name"
            translate
          >
            Group name
          </label>
          <button
            class="btn-help btn-help--sm a-s-center"
            [attr.aria-label]="'Help' | translate"
            [popover]="customPopoverTemplate"
            placement="right"
            type="button"
            [outsideClick]="true"
            data-cy="add-smart-group-component--Help-button"
          ></button>
          <input
            class="form-control"
            id="name"
            placeholder="{{ 'e.g. My smart group' | translate }}"
            name="name"
            type="text"
            autocomplete="off"
            required
            [(ngModel)]="smartGroup.name"
          />
        </c8y-form-group>
      </div>
    </div>
    <div class="modal-footer">
      <button
        class="btn btn-default"
        title="{{ 'Cancel' | translate }}"
        (click)="close()"
        translate
      >
        Cancel
      </button>

      <button
        class="btn btn-primary"
        title="{{ 'Add' | translate }}"
        type="submit"
        [disabled]="createSmartGroup.form.invalid"
        translate
      >
        Add
      </button>
    </div>
  </form>
</div>

<ng-template #customPopoverTemplate>
  <div
    class="m-b-16"
    style="pointer-events: auto"
    tabindex="0"
    data-cy="add-smart-group-component--popover-Template"
    translate
  >
    Thе smart group will be created based on the filters currently applied in the device list.
    <br />
  </div>
  <p
    c8y-guide-docs
    translate
    ngNonBindable
  >
    <small>
      Find out more in the
      <a c8y-guide-href="docs/device-management-application/grouping-devices/#using-smart-groups">
        user documentation
      </a>
      .
    </small>
  </p>
</ng-template>