<div class="page-header">
    <h1>{{'personalInfoHtmlTitle' | translate}}</h1>
</div>

<div class="col-sm-12 content-area">

    <form #formGroup="ngForm" (ngSubmit)="saveAccount()" class="form-horizontal">

        <div *ngIf="!isRegistrationEmailAsUsername" class="form-group ">
            <div class="col-sm-2 col-md-2">
                <label for="username" class="control-label">{{'username' | translate}}</label><span *ngIf="isEditUserNameAllowed" class="required">*</span>
            </div>

            <div class="col-sm-6 col-md-6">
                <input *ngIf="isEditUserNameAllowed" type="text" class="form-control" required ngModel id="username" name="username" value="{{username}}" >
                <span *ngIf="!isEditUserNameAllowed">{{ username }}</span>
            </div>
        </div>

        <div class="form-group ">
            <div class="col-sm-2 col-md-2">
                <label for="email" class="control-label">{{'email' | translate }}</label> <span class="required">*</span>
            </div>

            <div class="col-sm-6 col-md-6">
                <input type="email" class="form-control" id="email" name="email" required autofocus="" ngModel type="text">
            </div>
        </div>

        <div class="form-group ">
            <div class="col-sm-2 col-md-2">
                <label for="firstName" class="control-label">{{'firstName' | translate}}</label> <span class="required">*</span>
            </div>

            <div class="col-sm-6 col-md-6">
                <input class="form-control" id="firstName" required name="firstName" ngModel type="text">
            </div>
        </div>

        <div class="form-group ">
            <div class="col-sm-2 col-md-2">
                <label for="lastName" class="control-label">{{'lastName' | translate}}</label> <span class="required">*</span>
            </div>

            <div class="col-sm-6 col-md-6">
                <input class="form-control" id="lastName" required name="lastName" ngModel type="text">
            </div>
        </div>

        <div class="form-group">
            <div id="kc-form-buttons" class="col-md-offset-2 col-md-10 submit">
                <div class="">
                    <button type="submit" [disabled]="!formGroup.valid || !formGroup.dirty" class="btn btn-primary btn-lg" name="submitAction">{{'doSave' | translate}}</button>
                </div>
            </div>
        </div>
    </form>

    <div class="subtitle"><span class="required">*</span> {{'requiredFields' | translate}}</div>
</div>
