
<div class="knk-mvp-overlay" (click)="close()"></div><a [routerLink]="['/', lang, 'discover']">
  <ng-svg-icon class="knk-mvp-logo" file="/public/images/logo.svg" name="mvp"></ng-svg-icon></a>
<div class="knk-mvp-wrapper">
  <div class="knk-mvp-wrapper__outside">
    <div class="knk-mvp-wrapper__inside">
      <div class="knk-mvp-card knk-mvp-card--registration">
        <div class="knk-mvp-card__content">
          <form fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="1 1 100" #form="ngForm" (ngSubmit)="onSubmit(form)" name="signup" novalidate>
            <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="1 1 50">
              <div class="knk-mvp-title" fxFlexAlign="center" [style.marginTop.px]="25">Welcome to Knoks!</div>
              <div fxLayout="column" fxLayoutAlign="center center" fxFlex="1 1 140px">
                <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(username) &amp;&amp; username?.errors">{{getErrorMessage(username, 'username')}}</div>
                <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(email) &amp;&amp; email?.errors">{{getErrorMessage(email, 'email')}}</div>
                <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(password) &amp;&amp; password?.errors">{{getErrorMessage(password, 'password')}}</div>
                <div class="knk-mvp-error" *ngIf="isControlDirtyOrTouched(passwordConfirm) &amp;&amp; passwordConfirm?.errors">{{getErrorMessage(passwordConfirm, 'repeat password')}}</div>
                <div class="knk-mvp-error" *ngIf="registrationError">{{registrationError.msg}}</div>
              </div>
              <ul class="knk-mvp-list">
                <li>Discover knoks</li>
                <li>Follow your favourite providers</li>
                <li>Monitor your activity</li>
                <li>Receive notifications and much more</li>
              </ul>
            </div>
            <div class="knk-mvp-spacer" fxFlex="1 0 1px"></div>
            <div fxLayout="column" fxLayoutAlign="start stretch" fxFlex="1 1 50">
              <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="20px" fxFlex="1 1 auto">
                <ng-svg-icon class="knk-mvp-secure" file="/public/images/mvp.svg" name="secure"></ng-svg-icon>
                <div class="knk-mvp-title">Sign-up</div>
              </div>
              <div fxLayout="column" fxLayoutAlign="space-between center" fxFlex="1 1 auto">
                <div [style.width.%]="100" [style.marginTop.px]="50">
                  <div class="knk-mvp-field">
                    <div class="knk-mvp-field__model">
                      <input class="knk-input" #username="ngModel" [(ngModel)]="user.userName" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(username) &amp;&amp; username?.errors}" type="text" name="username" placeholder="Username" required>
                    </div>
                  </div>
                </div>
                <div [style.width.%]="100">
                  <div class="knk-mvp-field">
                    <div class="knk-mvp-field__model">
                      <input class="knk-input" knkEmail #email="ngModel" [(ngModel)]="user.email" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(email) &amp;&amp; email?.errors}" type="text" name="email" placeholder="Email" required>
                    </div>
                  </div>
                </div>
                <div [style.width.%]="100">
                  <div class="knk-mvp-field">
                    <div class="knk-mvp-field__model">
                      <input class="knk-input" #password="ngModel" #passwordModel [(ngModel)]="user.password" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(password) &amp;&amp; password?.errors}" type="password" name="password" placeholder="Password" required>
                      <ng-svg-icon class="knk-mvp-eye knk-mvp-field__ic" *ngIf="passwordModel.type === 'password'" [inputPassword2Text]="[passwordModel, passwordConfirmModel]" file="/public/images/mvp.svg" name="ic-invisible"></ng-svg-icon>
                      <ng-svg-icon class="knk-mvp-eye knk-mvp-field__ic" *ngIf="passwordModel.type === 'text'" [inputPassword2Text]="[passwordModel, passwordConfirmModel]" file="/public/images/mvp.svg" name="ic-visible"></ng-svg-icon>
                      <ng-template #passwordTooltipTpl>Password must be minimum 8 characters long, contain uppercase, lowercase and a symbol.</ng-template><i class="material-icons knk-mvp-field__hint" [tooltipHtml]="passwordTooltipTpl" placement="bottom" container="body" containerClass="knk-tooltip" triggers="click">error_outline</i>
                    </div>
                  </div>
                </div>
                <div [style.width.%]="100">
                  <div class="knk-mvp-field">
                    <div class="knk-mvp-field__model">
                      <input class="knk-input" #passwordConfirm="ngModel" #passwordConfirmModel [(ngModel)]="user.passwordConfirm" inputConfirm [inputConfirmDirect]="password" [inputConfirmTarget]="passwordConfirm" [ngClass]="{&quot;knk-input--wrong&quot;: isControlDirtyOrTouched(passwordConfirm) &amp;&amp; passwordConfirm?.errors}" type="password" name="passwordConfirm" placeholder="Repeat Password" required>
                    </div>
                  </div>
                </div>
                <div [style.width.%]="100" [style.marginTop.px]="25" [style.marginBottom.px]="25">
                  <div class="knk-mvp-field">
                    <ng-button-distorted class="ng-button-distorted--filled ng-button-distorted--rounded" [disabled]="!isFormValid(form)" [type]="'submit'">Start Knoksing</ng-button-distorted>
                  </div>
                </div>
              </div>
              <div fxLayout="row" fxLayoutAlign="space-around center" fxFlex="1 1 auto">
                <div>Already have an account?&#160;<a [routerLink]="['/', lang, 'login']">Login</a></div>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>