<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">
    <mat-card color="default" class="mat-elevation-z0">
      <mat-card-content fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between">
        <mat-input-container class="userName" floatPlaceholder="never" fxFlex="65%" fxFlex.lt-md="100%">
          <input readonly matInput placeholder="User Name" [value]="user.email">
          <span matSuffix>(#{{user?.userId}}-{{accounts[0]?.accountId}})</span>
        </mat-input-container>

        <div fxFlex="100%" fxLayout="row" fxLayoutAlign="start center" class="avatar" (click)="toggleEditMode(true)">
          <img *ngIf="imageSrc && imageSrc.length > 0" [src]="imageSrc"/>
          <i *ngIf="!imageSrc || imageSrc.length === 0" class="material-icons user-img">account_circle</i>
          <button *ngIf="edit" class="knok-control btn-upload" mat-raised-button (click)="fileInput.click();">Change
            avatar...
          </button>
          <input type='file' #fileInput [fxHide]="true" (change)="readUrl($event)">
        </div>

        <mat-input-container fxFlex="45%" *ngIf="!edit" fxFlex.lt-md="100%" (click)="toggleEditMode(true)">
          <input matInput readonly="true" [matDatepicker]="birthDatePicker" [(ngModel)]="user.birthDate"
                 placeholder="Birth date">
        </mat-input-container>

        <mat-input-container fxFlex="45%" *ngIf="edit" fxFlex.lt-md="100%" (click)="toggleEditMode(true)">
          <input matInput [matDatepicker]="birthDatePicker" [(ngModel)]="editUser.birthDate" placeholder="Birth date"
                 required>
          <mat-datepicker-toggle matSuffix [for]="birthDatePicker" [disabled]="false"></mat-datepicker-toggle>
          <mat-datepicker #birthDatePicker></mat-datepicker>
        </mat-input-container>

        <mat-input-container fxFlex="45%" *ngIf="!edit" fxFlex.lt-md="100%" (click)="toggleEditMode(true)">
          <input matInput readonly="true" placeholder="Phone" [(ngModel)]="user.phone">
          <span matPrefix>+{{user?.phonePrefix}}</span>
        </mat-input-container>

        <mat-input-container fxFlex="45%" *ngIf="edit" fxFlex.lt-md="100%">
          <input matInput type="tel" pattern="(\+?\d[- .]*){7,13}" placeholder="Phone" (keyup)="parsePhone()"
                 [(ngModel)]="phoneFull">
          <span matPrefix>+</span>
        </mat-input-container>

        <mat-input-container fxFlex="100%" *ngIf="!edit" (click)="toggleEditMode(true)">
          <input matInput readonly placeholder="Address"
                 [value]="(user.address ? user.address +', ': '') +(user.city ? user.city +', ': '') +(user.zipCode ? user.zipCode: '')">
        </mat-input-container>

        <mat-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
          <input matInput placeholder="Address" [(ngModel)]="editUser.address">
        </mat-input-container>

        <mat-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
          <input matInput placeholder="City" [(ngModel)]="editUser.city">
        </mat-input-container>

        <mat-input-container fxFlex.lt-md="100%" fxFlex="45%" *ngIf="edit">
          <input matInput placeholder="Zip code" [(ngModel)]="editUser.zipCode">
        </mat-input-container>

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

        <mat-select fxFlex="50%" fxFlex.lt-md="100%" *ngIf="!edit" [disabled]="true" (click)="toggleEditMode(true)"
                    mat-no-asterisk placeholder="The language"
                    class="full-width-input mat-primary" [(ngModel)]="user.languageId" required no-asterisk>
          <mat-option *ngFor="let option of languages" [value]="option.languageId" class="mat-primary">
            {{option.languageName}}
          </mat-option>
        </mat-select>

        <mat-select fxFlex="50%" fxFlex.lt-md="100%" *ngIf="edit" (click)="toggleEditMode(true)" mat-no-asterisk
                    placeholder="The language"
                    class="full-width-input mat-primary" [(ngModel)]="user.languageId" required no-asterisk>
          <mat-option *ngFor="let option of languages" [value]="option.languageId" class="mat-primary">
            {{option.languageName}}
          </mat-option>
        </mat-select>

        <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" mat-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>
      </mat-card-content>
    </mat-card>

    <mat-card *ngIf="registrationError" class="registration-error mat-elevation-z0">
      <mat-card-content>
        <mat-error>{{registrationError.msg}}</mat-error>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex.lt-md="100" fxFlexOffset.gt-sm="28px" class="general-info" ngClass.gt-sm="gt-sm">
    <mat-card color="primary" class="mat-elevation-z0">
      <mat-list>
        <mat-list-item fxLayour="row">
          <mat-icon color="primary">local_phone</mat-icon>&nbsp;<span
          [innerHTML]="'[help.info.item.1]'|translate"></span></mat-list-item>
        <mat-divider></mat-divider>
        <mat-list-item fxLayour="row">
          <mat-icon color="primary">verified_user</mat-icon>&nbsp;<span>{{'[help.info.item.2]'|translate}}</span>
        </mat-list-item>
      </mat-list>
    </mat-card>
  </div>
</div>
