<ion-header>
  <ion-toolbar>
    <ion-title>
      个人信息
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-card>
    <ion-card-header>
      <ion-card-title>
        <ion-avatar style="width: 80px; height: 80px; margin-left: 39%;">
          <img src="/assets/img/man.jpg" alt="头像">
        </ion-avatar>
      </ion-card-title>
    </ion-card-header>
  </ion-card>

  <ion-card style="margin: 20px;">
    <ion-list style="margin: 15px;">
      <ion-item button (click)="editProfile('name')">
        <ion-label>姓名</ion-label>
        <ion-note slot="end">{{ profile.name }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('birthday')">
        <ion-label>生日</ion-label>
        <ion-note slot="end">{{ profile.birthday | date }}</ion-note>
      </ion-item>
  
      <ion-item button (click)="editProfile('relationship')">
        <ion-label>与TA的关系</ion-label>
        <ion-note slot="end">{{ profile.relationship }}</ion-note>
      </ion-item>
      <ion-item>
        <ion-label>性别</ion-label>
        <ion-select [(ngModel)]="profile.gender" interface="popover">
          <ion-select-option value="male">男性</ion-select-option>
          <ion-select-option value="female">女性</ion-select-option>
          <ion-select-option value="none">无性别者</ion-select-option>
        </ion-select>
      </ion-item>
      <ion-item button (click)="editProfile('contact')">
        <ion-label>联系方式</ion-label>
        <ion-note slot="end">{{ profile.contact }}</ion-note>
      </ion-item>
    </ion-list>
  </ion-card>

  <ion-card style="margin: 20px;">
    <ion-list>
      <ion-item button (click)="editProfile('hobbies')">
        <ion-label>爱好</ion-label>
        <ion-note slot="end">{{ profile.hobbies }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('taste')">
        <ion-label>口味</ion-label>
        <ion-note slot="end">{{ profile.taste }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('habits')">
        <ion-label>习惯</ion-label>
        <ion-note slot="end">{{ profile.habits }}</ion-note>
      </ion-item>
      <ion-item button (click)="editProfile('dislikes')">
        <ion-label>讨厌</ion-label>
        <ion-note slot="end">{{ profile.dislikes }}</ion-note>
      </ion-item>
    </ion-list>
  </ion-card>
</ion-content>