<div>
    <form #newUserFrom="ngForm" class="clr-form clr-form-horizontal">
        <div class="clr-form-control">
            <label class="required clr-control-label">{{
                'PROFILE.USER_NAME' | translate
            }}</label>
            <div
                class="clr-control-container"
                [class.clr-error]="getValidationState('username')">
                <div class="clr-input-wrapper">
                    <input
                        type="text"
                        class="clr-input"
                        required
                        pattern='[^,"~#$%]+'
                        maxLengthExt="255"
                        #usernameInput="ngModel"
                        name="username"
                        [(ngModel)]="newUser.username"
                        id="username"
                        size="30"
                        (input)="handleValidation('username', false)"
                        (blur)="handleValidation('username', true)" />
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <span
                        class="spinner spinner-inline spinner-pos"
                        [hidden]="isChecking('username')"></span>
                </div>
                <clr-control-error *ngIf="getValidationState('username')">
                    {{ usernameTooltip | translate }}
                </clr-control-error>
            </div>
        </div>
        <div class="clr-form-control">
            <label class="required clr-control-label">{{
                'PROFILE.EMAIL' | translate
            }}</label>
            <div
                class="clr-control-container"
                [class.clr-error]="getValidationState('email')">
                <div class="clr-input-wrapper">
                    <input
                        name="email"
                        type="text"
                        #eamilInput="ngModel"
                        [(ngModel)]="newUser.email"
                        required
                        email
                        id="email"
                        size="30"
                        (input)="handleValidation('email', false)"
                        (blur)="handleValidation('email', true)"
                        class="clr-input" />
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                    <span
                        class="spinner spinner-inline spinner-pos"
                        [hidden]="isChecking('email')"></span>
                    <clr-control-helper *ngIf="isSelfRegistration">{{
                        'TOOLTIP.SIGN_UP_MAIL' | translate
                    }}</clr-control-helper>
                    <clr-control-error *ngIf="getValidationState('email')">
                        {{ emailTooltip | translate }}
                    </clr-control-error>
                </div>
            </div>
        </div>
        <clr-input-container>
            <label class="required">{{
                'PROFILE.FULL_NAME' | translate
            }}</label>
            <input
                clrInput
                type="text"
                name="realname"
                #fullNameInput="ngModel"
                [(ngModel)]="newUser.realname"
                required
                maxLengthExt="80"
                id="realname"
                size="30"
                (input)="handleValidation('realname', false)"
                (blur)="handleValidation('realname', true)" />
            <clr-control-error *ngIf="getValidationState('realname')">
                {{ 'TOOLTIP.FULL_NAME' | translate }}
            </clr-control-error>
        </clr-input-container>
        <div class="clr-form-control">
            <label for="newPassword" class="clr-control-label required">{{
                'PROFILE.PASSWORD' | translate
            }}</label>
            <div
                class="clr-control-container"
                [class.clr-error]="getValidationState('newPassword')">
                <div class="clr-input-wrapper">
                    <input
                        class="clr-input pwd-input"
                        [type]="showNewPwd ? 'text' : 'password'"
                        id="newPassword"
                        required
                        pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,128}$"
                        name="newPassword"
                        [(ngModel)]="newUser.password"
                        #newPassInput="ngModel"
                        size="30"
                        maxLength="128"
                        (input)="handleValidation('newPassword', false)"
                        (blur)="handleValidation('newPassword', true)" />
                    <clr-icon
                        *ngIf="!showNewPwd"
                        shape="eye"
                        class="pw-eye"
                        (click)="showNewPwd = !showNewPwd"></clr-icon>
                    <clr-icon
                        *ngIf="showNewPwd"
                        shape="eye-hide"
                        class="pw-eye"
                        (click)="showNewPwd = !showNewPwd"></clr-icon>
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                </div>
                <clr-control-helper *ngIf="isSelfRegistration">{{
                    'CHANGE_PWD.PASS_TIPS' | translate
                }}</clr-control-helper>
                <clr-control-error *ngIf="getValidationState('newPassword')">
                    {{ 'TOOLTIP.PASSWORD' | translate }}
                </clr-control-error>
            </div>
        </div>
        <div class="clr-form-control">
            <label for="confirmPassword" class="clr-control-label required">{{
                'CHANGE_PWD.CONFIRM_PWD' | translate
            }}</label>
            <div
                class="clr-control-container"
                [class.clr-error]="getValidationState('confirmPassword')">
                <div class="clr-input-wrapper">
                    <input
                        class="clr-input pwd-input"
                        [type]="showConfirmPwd ? 'text' : 'password'"
                        id="confirmPassword"
                        required
                        pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,128}$"
                        name="confirmPassword"
                        [(ngModel)]="confirmedPwd"
                        #confirmPassInput="ngModel"
                        size="30"
                        maxLength="128"
                        (input)="handleValidation('confirmPassword', false)"
                        (blur)="handleValidation('confirmPassword', true)" />
                    <clr-icon
                        *ngIf="!showConfirmPwd"
                        shape="eye"
                        class="pw-eye"
                        (click)="showConfirmPwd = !showConfirmPwd"></clr-icon>
                    <clr-icon
                        *ngIf="showConfirmPwd"
                        shape="eye-hide"
                        class="pw-eye"
                        (click)="showConfirmPwd = !showConfirmPwd"></clr-icon>
                    <clr-icon
                        class="clr-validate-icon"
                        shape="exclamation-circle"></clr-icon>
                </div>
                <clr-control-error
                    *ngIf="getValidationState('confirmPassword')">
                    {{ 'TOOLTIP.CONFIRM_PWD' | translate }}
                </clr-control-error>
            </div>
        </div>
        <clr-input-container>
            <label>{{ 'PROFILE.COMMENT' | translate }}</label>
            <input
                clrInput
                type="text"
                #commentInput="ngModel"
                name="comment"
                [(ngModel)]="newUser.comment"
                maxLengthExt="30"
                id="comment"
                size="30"
                (input)="handleValidation('comment', false)"
                (blur)="handleValidation('comment', true)" />
            <clr-control-error *ngIf="getValidationState('comment')">
                {{ 'TOOLTIP.COMMENT' | translate }}
            </clr-control-error>
        </clr-input-container>
    </form>
</div>
