<ion-header>
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-button>
        消息 ({{unreadMessages}})
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button (click)="search()">
        <ion-icon name="search"></ion-icon>
      </ion-button>
      <ion-button>
        <ion-icon name="people-outline"></ion-icon>
      </ion-button>
      <ion-button (click)="addNewMessage()">
        <ion-icon name="add"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-list>
    <ion-item *ngFor="let message of messages">
      <ion-avatar slot="start">
        <img *ngIf="message.avatar" [src]="message.avatar" />
        <ion-icon *ngIf="!message.avatar" name="person-circle"></ion-icon>
      </ion-avatar>
      <ion-label>
        <h2>{{message.title}}</h2>
        <p>{{message.content}}</p>
      </ion-label>
      <ion-label slot="end">{{message.time}}</ion-label>
    </ion-item>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-toolbar color="light">
    <ion-buttons slot="start">
      <ion-button [class.active]="selectedTab === 'home'" (click)="selectTab('home')">
        <ion-button [routerLink]="'/tabs/tab1'" routerDirection="root">
          <ion-icon name="home"></ion-icon>
        </ion-button>
      </ion-button>
      <ion-button [class.active]="selectedTab === 'shop'" (click)="selectTab('shop')">
        <ion-button [routerLink]="'/tabs/tab2'" routerDirection="root">
          <ion-icon name="cart"></ion-icon>
        </ion-button>
      </ion-button>
    </ion-buttons>
    <ion-buttons slot="end">
      <ion-button [class.active]="selectedTab === 'message'" (click)="selectTab('message')">
        <ion-button [routerLink]="'/tabs/tab3'" routerDirection="root">
          <ion-icon name="chatbox"></ion-icon>
        </ion-button>
      </ion-button>
      <ion-button [class.active]="selectedTab === 'profile'" (click)="selectTab('profile')">
        <ion-button [routerLink]="'/tabs/tab4'" routerDirection="root">
          <ion-icon name="person"></ion-icon>
        </ion-button>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-footer>