<ion-header>
  <ion-toolbar>
    <ion-title>Urnings</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content no-padding>
  <ion-list>
    <ng-container *ngFor="let profile of profiles">
      <ion-item no-padding *ngIf="profile.messages?.length > 0">
        <ion-thumbnail
          padding-left
          item-start
          (tap)="profilePictureTapped($event, profile)"
        >
          <img [src]="'/assets/' + profile.details.pic.thumb" />
        </ion-thumbnail>
        <ion-grid (tap)="interviewTapped($event, profile)">
          <ion-row nowrap justify-content-between>
            <ion-col class="username"> {{profile.details.name}} </ion-col>
            <ion-col
              class="timestamp"
              [innerHTML]="getLatestMessageTimestamp(profile.messages)"
            ></ion-col>
          </ion-row>
          <ion-row class="latest-message" nowrap>
            <ion-col [innerHTML]="getLatestMessage(profile.messages)"></ion-col>
          </ion-row>
        </ion-grid>
      </ion-item>
    </ng-container>
  </ion-list>
</ion-content>
