<div class="signup-card text-center" [class.signup-card-with-ref]="!!referralInfo">
  <form [formGroup]="signupForm" (ngSubmit)="signup()">
    <div>
      <mat-card appearance="raised" [style.margin-top]="cardTopMargin">
        <app-fl-backdrop *ngIf="loading"></app-fl-backdrop>
        <div>
          <app-logo [darkContext]="false" [linkOptions]="logoLinkOptions" [customStyle]="{
            width: '140px',
            height: '70px',
            marginBottom: '20px'
          }"></app-logo>
        </div>
        <mat-card-title class="text-left">
          <span class="card-title" i18n>Sign up</span>
          <p class="fl-detail" *ngIf="referralInfo" i18n>
            You've been invited to our cloud service! Sign up and get a
            {{referralInfo.referee_credit | currencyFormatter: referralInfo.default_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}},
            {{referralInfo.referee_credit_valid_days}}-day credit to try our service. Spend
            {{referralInfo.referee_spends_credit | currencyFormatter: referralInfo.default_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}}
            after your credit expires, and whoever referred you will get {{referralInfo.referrer_credit | currencyFormatter: referralInfo.default_currency: auth.currencyDisplayMode: auth.currencyDigitsInfo: config.locale}} in credit.
          </p>
        </mat-card-title>
        <mat-card-content class="fl-margin-top">
          <app-form-errors #formErrors [formGroup]="signupForm"></app-form-errors>
          <div layoutDirection="row">
            <mat-form-field appFlex="50">
              <mat-label i18n>First name</mat-label>
              <input matInput placeholder="First name" i18n-placeholder maxlength="64"
                     type="text" formControlName="first_name" name="first_name"
                     [cdkTrapFocusAutoCapture]="true" [cdkTrapFocus]="false"
                     required>
              <mat-error>{{fieldErrors['first_name']}}</mat-error>
            </mat-form-field>
            <mat-form-field appFlex="50" class="offset-5px">
              <mat-label i18n>Last name</mat-label>
              <input matInput placeholder="Last name" i18n-placeholder maxlength="64"
                     type="text" formControlName="last_name" name="last_name" required>
              <mat-error>{{fieldErrors['last_name']}}</mat-error>
            </mat-form-field>
          </div>
          <mat-form-field>
            <mat-label i18n>Email</mat-label>
            <input matInput placeholder="Email" i18n-placeholder maxlength="64"
                   type="text" formControlName="email" name="email" required>
            <mat-error>{{fieldErrors['email']}}</mat-error>
          </mat-form-field>
          <mat-form-field subscriptSizing="dynamic">
            <mat-label i18n>Password</mat-label>
            <input matInput placeholder="Password" i18n-placeholder formControlName="password" maxlength="255"
                   [type]="(passwordCtrl.value.length > 0)? 'password' : 'text'"
                   name="password" required>
            <mat-error>{{fieldErrors['password']}}</mat-error>
          </mat-form-field>
          <div class="text-left" *ngIf="config.authService && config.authService.userData &&
          config.authService.userData.requires_tos_agreement">
            <mat-checkbox *ngIf="config.authService && config.authService.userData &&
            config.authService.userData.requires_tos_agreement"
                          [color]="'primary'" formControlName="tos_agreement" i18n>
              I agree with <a class="active-link"
                              [routerLink]="[config.getPanelUrl('terms-of-service-preview'),
                              config.authService.userData.requires_tos_agreement]" target="_blank">terms &amp; conditions</a>
            </mat-checkbox>
          </div>

          <div *ngIf="config.current.settings.reCaptchaSiteKey" class="fl-margin-top" #captchaRef2></div>

        </mat-card-content>
        <mat-card-actions class="fl-block">
          <div>
            <button mat-raised-button [color]="'primary'" type="submit" class="signup-button" i18n>Sign up</button>
          </div>
          <div>
            <a [routerLink]="config.getPanelUrl('login')" mat-flat-button i18n>Go back to login</a>
          </div>
        </mat-card-actions>
      </mat-card>
    </div>
  </form>
  <a class="powered-by-link" href="http://fleio.com" target="_blank"
     *ngIf="config.authService && config.authService.userData && !config.authService.userData.is_white_label" i18n>
    Powered by Fleio
  </a>
</div>
