<div class="card mb-4">
  <div class="card-body">
    <h6 class="mb-4">{{ 'forms.external-components' | translate }}</h6>

    <form [formGroup]="commonForm" #form="ngForm" (ngSubmit)="onSubmit()" novalidate class="tooltip-label-right">
      <div class="form-group">
        <label>{{ 'forms.name' | translate }}</label>
        <input type="text" class="form-control" name="name" formControlName="name">
        <small>Only letters and at least 2 characters</small>
        <div *ngIf="commonForm.get('name')?.errors?.required && form.submitted" class="invalid-tooltip">Name is required!</div>
        <div *ngIf="commonForm.get('name')?.errors?.minlength && form.submitted" class="invalid-tooltip">Name must contain at least 2 characters!</div>
        <div *ngIf="commonForm.get('name')?.errors?.pattern && form.submitted" class="invalid-tooltip">Name must only contain letters!</div>
      </div>
      <div class="form-group">
        <label>{{ 'forms.age' | translate }}</label>
        <input type="text" class="form-control" name="age" formControlName="age">
        <small>Only numbers and between 18-99</small>
        <div *ngIf="commonForm.get('age')?.errors?.required && form.submitted" class="invalid-tooltip">Age is required!</div>
        <div *ngIf="commonForm.get('age')?.errors?.pattern && form.submitted" class="invalid-tooltip">Age must only contain numbers and be between 17-120!</div>
      </div>
      <div class="form-group">
        <label>{{ 'forms.email' | translate }}</label>
        <input type="text" class="form-control" name="email" formControlName="email">
        <small>Valid email</small>
        <div *ngIf="commonForm.get('email')?.errors?.required && form.submitted" class="invalid-tooltip">Email is required!</div>
        <div *ngIf="commonForm.get('email')?.errors?.email && form.submitted" class="invalid-tooltip">Email must be a valid address!</div>
      </div>
      <div class="form-group error-l-100">
        <label>{{ 'forms.email-confirm' | translate }}</label>
        <input type="text" class="form-control" name="emailConfirm" formControlName="emailConfirm">
        <small>Emails must match and be a valid address</small>
        <div *ngIf="commonForm.get('emailConfirm')?.errors?.required && form.submitted" class="invalid-tooltip">Email confirmation is required!</div>
        <div *ngIf="commonForm.get('emailConfirm')?.errors?.email && form.submitted" class="invalid-tooltip">Email must be a valid address!</div>
        <div *ngIf="(!commonForm.get('emailConfirm')?.errors?.email && !commonForm.get('emailConfirm')?.errors?.required && commonForm.get('emailConfirm')?.errors?.match) && form.submitted" class="invalid-tooltip">Emails must match!</div>
      </div>
      <div class="form-group error-l-75">
        <label>{{ 'forms.password' | translate }}</label>
        <input type="text" class="form-control" name="password" formControlName="password" >
        <small>Must contain at least a letter and number and must be 8 characters or longer</small>
        <div *ngIf="commonForm.get('password')?.errors?.required && form.submitted" class="invalid-tooltip">Password is required!</div>
        <div *ngIf="commonForm.get('password')?.errors?.pattern && form.submitted" class="invalid-tooltip">Paswsword must contain at least a letter and a number!</div>
        <div *ngIf="!commonForm.get('password')?.errors?.pattern && commonForm.get('password')?.errors?.minlength && form.submitted" class="invalid-tooltip">Paswsword must contain at least 8 characters!</div>
      </div>
      <button class="btn btn-primary" type="submit">{{ 'forms.submit' | translate }}</button>
    </form>

  </div>
</div>
