<nb-card [size]="breakpoint.width >= breakpoints.xxxl || breakpoint.width < breakpoints.md ? 'large' : 'xlarge'">
  <nb-tabset fullWidth>
    <nb-tab tabTitle="Contacts">
      <div class="contact" *ngFor="let c of contacts">
        <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
        <i class="i-contact nb-phone"></i>
      </div>
    </nb-tab>
    <nb-tab tabTitle="Recent">
      <div class="contact" *ngFor="let c of recent">
        <nb-user [picture]="c.user.picture" [name]="c.user.name" [title]="c.type" size="large"></nb-user>
        <span class="time">{{ c.time | date: 'shortTime' }}</span>
      </div>
    </nb-tab>
  </nb-tabset>
</nb-card>
