<sm-dialog-template>
  <div  class="d-flex flex-column">
    <div  class="al-ico-users al-icon icon mx-auto xxl"></div>
  </div><!---->
  <div  class="d-flex flex-column">
    <div  class="create-title mx-auto ellipsis">Add users</div>
  </div>
  <div class="textarea-container">
    <div>
      Enter email(s)
    </div>
    <form [formGroup]="emailForm">
      <mat-form-field class="w-100">
      <textarea matInput
                formControlName="email"
                cdkTextareaAutosize
                cdkAutosizeMinRows="5"
                cdkAutosizeMaxRows="5"
      ></textarea>

      </mat-form-field>
      <mat-hint>separated by comma (','), semicolon (';'), pipe ('|') or white spaces (space, tab, newline)</mat-hint>
      <div class="mat-error-container">


        <ng-container *ngIf="emailController.dirty && emailForm.value && !emailForm.valid">
          <mat-error *ngIf="emailController.errors?.emailsValidator">
            Please enter a valid email address.
          </mat-error>

          <mat-error *ngIf="emailController.errors?.numberAvailableEmails">
            Only {{emailController.errors.numberAvailableEmails.value}} users available.
          </mat-error>
        </ng-container>

      </div>

    </form>
  </div>

  <div class="actions">
    <div class=" d-flex-inline m-auto align-items-center text-center">
      <button (click)="this.dialogRef.close()" class="btn-outline-neon">
        CANCEL
      </button>

      <button [disabled]="!emailForm.get('email').valid || !emailForm.get('email').dirty"
              (click)="onInviteHandler(emailForm.get('email').value)" class="btn btn-neon">
        ADD
      </button>

    </div>
  </div>

</sm-dialog-template>
