<form class="create-queue-form" #queueForm='ngForm'>
  <div class="row position-relative">
    <mat-form-field appearance="outline" class="w-100 pt-3">
      <mat-error *ngIf="name?.errors?.required">Required</mat-error>
      <mat-error *ngIf="name?.errors?.minlength">Name should contain at least 3 characters</mat-error>
      <mat-error *ngIf="name?.errors?.uniqueName">Name should be unique</mat-error>
      <mat-label>Queue name</mat-label>
      <input matInput type="text"
             name="queueName"
             #name="ngModel"
             [(ngModel)]="queue.name"
             required
             minlength="3"
             smUniqueNameValidator
             [existingNames]="queuesNames">
    </mat-form-field>
  </div>
  <br/>
  <div class="create-queue-button">
    <button class="btn btn-dark-fill center" [disabled]="queueForm.invalid || (isEdit && queueForm.pristine)"
            (click)="send()">{{isEdit ? 'RENAME' : 'CREATE'}}
    </button>
  </div>
</form>
