<h1 class="heading">My profile</h1>
<div fxLayout="row" fxLayoutAlign="center start" fxLayoutWrap.lt-md ngClass.lt-md="lt-md" *ngIf="user">
    <div fxFlex="100" fxFlex.gt-sm="730px">
        <md-card color="default" class="mat-elevation-z0">
            <md-card-content fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between">
                <md-input-container class="userName" floatPlaceholder="never" fxFlex="65%" fxFlex.lt-md="100%">
                    <input readonly mdInput placeholder="User Name" [value]="user.firstName+' '+user.lastName">
                    <span mdSuffix>(#{{user?.userId}}-{{accounts[0]?.accountId}})</span>
                </md-input-container>
                <md-input-container fxFlex="45%" *ngIf="!edit" fxFlex.lt-md="100%" (click)="toggleEditMode(true)">
                    <input mdInput readonly="true" placeholder="Email address" [(ngModel)]="user.email">
                </md-input-container>
                <md-input-container fxFlex="45%" *ngIf="!edit" fxFlex.lt-md="100%" (click)="toggleEditMode(true)">
                    <input mdInput readonly="true" placeholder="Mobile phone" [(ngModel)]="user.phone">
                </md-input-container>
                <md-input-container fxFlex="45%" *ngIf="edit" fxFlex.lt-md="100%">
                    <input mdInput placeholder="Email address" [(ngModel)]="editUser.email">
                </md-input-container>
                <md-input-container fxFlex="45%" *ngIf="edit" fxFlex.lt-md="100%">
                    <input mdInput placeholder="Mobile phone" [(ngModel)]="editUser.phone">
                </md-input-container>

                <md-input-container fxFlex="100%" *ngIf="!edit" (click)="toggleEditMode(true)">
                    <input mdInput readonly placeholder="Address" [value]="user.address+', '+user.city+', '+user.state+', '+user.postCode">
                </md-input-container>
                <md-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
                    <input mdInput placeholder="Address" [(ngModel)]="editUser.address">
                </md-input-container>
                <md-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
                    <input mdInput placeholder="City" [(ngModel)]="editUser.city">
                </md-input-container>
                <md-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
                    <input mdInput placeholder="State" [(ngModel)]="editUser.state">
                </md-input-container>
                <md-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
                    <input mdInput placeholder="Post code" [(ngModel)]="editUser.postCode">
                </md-input-container>

                <h3 fxFlex="100%" *ngIf="edit">Please enter your password to confirm changes</h3>
                <md-input-container fxFlex.lt-md="100%" fxFlex="50%" [style.display]="!edit?'none':''" [style.margin-bottom]="edit?'30px':''">
                    <input #pwdInput type="Password" mdInput placeholder="password" [(ngModel)]="editUser.password">
                </md-input-container><span fxFlex="1" class="separator" *ngIf="edit"></span>

                <md-select fxFlex="50%" fxFlex.lt-md="100%"  *ngIf="!edit" [disabled]="true" (click)="toggleEditMode(true)" md-no-asterisk placeholder="The interface language"
                    class="full-width-input mat-primary" [(ngModel)]="user.languageCode" required no-asterisk>
                    <md-option *ngFor="let option of languages" [value]="option.id" class="mat-primary">{{option.value}}</md-option>
                </md-select>
                <md-select fxFlex="50%" fxFlex.lt-md="100%"  *ngIf="edit" (click)="toggleEditMode(true)" md-no-asterisk placeholder="The interface language"
                    class="full-width-input mat-primary" [(ngModel)]="editUser.languageCode" required no-asterisk>
                    <md-option *ngFor="let option of languages" [value]="option.id" class="mat-primary">{{option.value}}</md-option>
                </md-select>
                <div fxFlex="100%" class="wide-radio" fxLayout="row" fxLayoutAlign="start baseline" (click)="toggleEditMode(true)">
                    <span fxFlex="50" class="wide-radio-items">{{("[property name.Would you like to get our newsletter]"|translate)}}</span>
                    <md-radio-group fxFlex [(ngModel)]="user.newsletterApproval" class="wide-radio-items">
                        <md-radio-button [value]="true" aria-label="Yes" class="mat-accent">Yes</md-radio-button>
                        <md-radio-button [value]="false" aria-label="No" class="mat-accent">No</md-radio-button>
                    </md-radio-group>
                </div>
                <div fxFlex="100%" fxLayout="row" fxLayoutAlign.gt-sm="end" class="buttons">
                    <div fxFlex.lt-md="100%" fxLayout="row-reverse" fxFlex="50%" fxLayoutAlign="space-between baseline">
                        <button fxFlex="50" md-button color="accent" (click)="save()" [disabled]="!edit || pwdInput==null || pwdInput.value.length == 0">{{'[myaccaunt.save]'|translate}}</button>
                        <span *ngIf="edit">or</span>
                        <span class="link-button" (click)="toggleEditMode(false)" *ngIf="edit">Cancel</span>
                    </div>
                </div>
            </md-card-content>
        </md-card>
    </div>
    <div fxFlex.lt-md="100" fxFlexOffset.gt-sm="28px" class="general-info" ngClass.gt-sm="gt-sm">
        <md-card color="primary" class="mat-elevation-z0">
            <md-list>
               <md-list-item fxLayour="row" ><md-icon color="primary">local_phone</md-icon>&nbsp;<span [innerHTML]="'[help.info.item.1]'|translate"></span></md-list-item>
                <md-divider></md-divider>
               <md-list-item fxLayour="row" ><md-icon color="primary">verified_user</md-icon>&nbsp;<span>{{'[help.info.item.2]'|translate}}</span></md-list-item>
           </md-list>
       </md-card>

    </div>
</div>
