<div class="login-title">Complete registration information</div>
<form class="form-horizontal text-left" #loginForm="ngForm" style="font-size: 14px">
  <div *ngFor="let formGroup of crmData">
    <div *ngFor="let field of formGroup.fields">
      <div [ngSwitch]="field.fieldType">
        <ng-container *ngSwitchCase="'text'">
          <span class="field-wrapper username-input">
            <mat-form-field appearance="outline" class="thin dark" floatLabel="always">
              <mat-label>{{field.label}}</mat-label>
              <input type="text"
                     matInput
                     [id]="field.name"
                     [name]="field.name"
                     [email]="field.name === 'email'"
                     [(ngModel)]="loginModel.crm_form_data[field.name]"
                     [required]="field.required"
                     [minlength]="['firstname','lastname'].includes(field.name) ? 1 : null"
                     [maxlength]="['firstname','lastname'].includes(field.name) ? 70 : null"
                     [disabled]="lockedEmail && field.name ==='email'">
              <mat-error class="dark" *ngIf="loginForm?.controls[field.name]?.errors && loginForm?.controls[field.name]?.errors['required']">
                Please provide a value
              </mat-error>
              <mat-error class="dark" *ngIf="loginForm?.controls[field.name]?.errors && loginForm?.controls[field.name]?.errors['minlength']">
                Please provide a name that is at least 1 characters
              </mat-error>
              <mat-error class="dark" *ngIf="loginForm?.controls[field.name]?.errors && loginForm?.controls[field.name]?.errors['maxlength']">
                Please provide a name that is up to 70 characters
              </mat-error>
            </mat-form-field>
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'number'">
          <span class="field-wrapper username-input">
            <mat-form-field appearance="outline" class="thin dark" floatLabel="always">
              <mat-label>{{field.label}}</mat-label>
            <input type="number"
                   [id]="field.name"
                   [name]="field.name"
                   [email]="field.name === 'email'"
                   [(ngModel)]="loginModel.crm_form_data[field.name]"
                   [required]="field.required">
            </mat-form-field>
          </span>
        </ng-container>
        <ng-container *ngSwitchCase="'select'">
            <span class="field-wrapper">
              <mat-form-field appearance="outline" class="thin dark short" floatLabel="always">
                <mat-label>{{field.label}}</mat-label>
                <mat-select
                  [(ngModel)]="loginModel.crm_form_data[field.name]"
                  [name]="field.name"
                  [id]="field.name"
                  placeholder="Please select"
                  [required]="field.required"
                >
                  <mat-option *ngFor="let option of field.options"
                              class="dark"
                              [value]="option.value"
                  >{{option.label}}</mat-option>
                </mat-select>
              </mat-form-field>
            </span>
        </ng-container>
        <ng-container *ngSwitchCase="'checkbox'">
            <span class="field-wrapper">
              <mat-form-field appearance="outline" class="thin dark short" floatLabel="always">
                <mat-label>{{field.label}}</mat-label>
                <mat-select
                  [(ngModel)]="loginModel.crm_form_data[field.name]"
                  [name]="field.name"
                  [id]="field.name"
                  placeholder="Please select"
                  [required]="field.required" multiple
                >
                  <mat-option *ngFor="let option of field.options"
                              class="dark"
                              [value]="option.value"
                  >{{option.label}}</mat-option>
                </mat-select>
              </mat-form-field>
            </span>
        </ng-container>
        <ng-container *ngSwitchCase="'radio'">
            <span class="field-wrapper">
              <mat-label>{{field.label}}</mat-label>
              <mat-radio-group
                [(ngModel)]="loginModel.crm_form_data[field.name]"
                [name]="field.name"
                [id]="field.name"
              >
                <mat-radio-button *ngFor="let option of field.options" [value]="option.value">{{option.label}}</mat-radio-button>
              </mat-radio-group>
            </span>
        </ng-container>
        <ng-container *ngSwitchCase="'booleancheckbox'">
            <span class="field-wrapper">
              <mat-checkbox
                [(ngModel)]="loginModel.crm_form_data[field.name]"
                [name]="field.name"
                [id]="field.name"
              >
                 <div [innerHTML]="field.label | safe:'html'"></div>
              </mat-checkbox>
            </span>
        </ng-container>
        <ng-container *ngSwitchCase="'date'">
        </ng-container>
      </div>
    </div>
  </div>

  <button id="app_submit_signup" class="btn" (click)="login()" [disabled]="!loginForm.valid || !signupToken || showSpinner">
    <mat-spinner class="spinner" *ngIf="showSpinner" diameter="16"></mat-spinner>
    SIGN UP
  </button>

  <div *ngIf="error" class="errors">{{error}}</div>
  <div class="terms-of-use">
    <span>By signing up you agree to Allegro AI’s<br><a class="link" [href]="touLink" target="_blank">Privacy Policy and Terms of Use</a>.</span>
  </div>
</form>
