<div *ngIf="showStyle == 'full'">
		<ion-item *ngIf="ath | async as u">
        <ion-badge item-start color="secondary">
        {{ rank + 1 }}
        </ion-badge>
				<ion-avatar item-start>
						<img [src]="u.output.ath.profile_medium">
				</ion-avatar>
        <h2>{{  u.output.ath.firstname }} {{ u.output.ath.lastname  }}</h2>
        <ion-note item-end>{{ format(u.output.total[0].total)}} cals</ion-note>
		</ion-item>
</div>
<div *ngIf="showStyle == 'today'">
		<ion-item *ngIf="ath | async as u">
        <ion-badge item-start color="secondary">
        {{ rank + 1 }}
        </ion-badge>
				<ion-avatar item-start>
						<img [src]="u.output.ath.profile_medium">
				</ion-avatar>
        <h2>{{  u.output.ath.firstname }} {{ u.output.ath.lastname  }}</h2>
        <ion-note item-end>{{ format(cals)}} cals</ion-note>
		</ion-item>
</div>
<div *ngIf="showStyle == 'norank'">
		<ion-item *ngIf="ath | async as u">
				<ion-avatar item-start>
						<img [src]="u.output.ath.profile_medium">
				</ion-avatar>
        <h2>{{  u.output.ath.firstname }} {{ u.output.ath.lastname  }}</h2>
        <ion-note item-end *ngIf="u.output.total[0]">{{ format(u.output.total[0].total)}} cals</ion-note>
		</ion-item>
</div>
<span *ngIf="showStyle == 'short'">
    <img [src]="u.output.ath.profile_medium" *ngIf="ath | async as u" class='shortphoto'>
        <strong *ngIf="ath | async as u">{{  u.output.ath.firstname }} {{ u.output.ath.lastname  }}</strong>
</span>
