
<ion-header mode="ios" class="ion-no-border">
  <ion-toolbar>
    <ion-buttons slot="start" (click)="onBack()">
      <ion-button>
        <ion-icon name="arrow-back-outline"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Edit Profile</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div class="boxed_contents">
    <div class="profile">
      <div class="bg_image back_image" [style.backgroundImage]="'url('+profilePicture+')'">
        <!--      <div class="icon">-->
        <!--        <ion-icon name="pencil"></ion-icon>-->
        <!--      </div>-->
      </div>
      <div class="title">
        <ion-label style="font-size: 17px; font-family: 'bold';">{{firstname}} {{lastname}}</ion-label>
        <ion-label style="font-size: 13px;">{{email}}</ion-label>
      </div>
    </div>

    <ion-item lines="none">
      <ion-input type="text"  maxlength="15" placeholder="Firstname" [(ngModel)]='firstname' ></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-input type="text"  maxlength="15" placeholder="lastname" [(ngModel)]='lastname' ></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-input type="text"  maxlength="35" placeholder="Email" [(ngModel)]='email' ></ion-input>
    </ion-item>

    <ion-item lines="none">
      <ion-input type="text"  maxlength="25" placeholder="Online Name" [(ngModel)]='online_name' ></ion-input>
    </ion-item>
  </div>

</ion-content>

<ion-footer>
  <ion-toolbar>
    <div class="button" (click)="onBack()">
      <ion-label class="text">Update</ion-label>
    </div>
  </ion-toolbar>
</ion-footer>
