<!--
  Generated template for the EventPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="primary">
    <ion-title>Burn More Get More</ion-title>
  </ion-navbar>
</ion-header>


<ion-content>
 <ion-refresher (ionRefresh)="refreshEvent($event)">
    <ion-refresher-content></ion-refresher-content>
  </ion-refresher>
<event-chart></event-chart>
<div>
    <ion-list-header *ngIf="allRunners" text-center>
        Total users: {{ format(allRunners.tuser + '') }} / activities: {{ format(allRunners.tact +'') }}
    </ion-list-header>
    
    <auth-detail [authId]="po.athId"  showStyle='norank' *ngIf="po"></auth-detail>
    <!--
    <auth-detail [authId]="229815"  showStyle='norank'></auth-detail>  -->
<ion-segment [(ngModel)]="eventSeg" color="secondary">
    <ion-segment-button value="contributors">
        Top Contributors
    </ion-segment-button>
    <ion-segment-button value="today">
        Top Today
    </ion-segment-button>
    <ion-segment-button value="activities">
        Recents
    </ion-segment-button>
</ion-segment>
<div [ngSwitch]="eventSeg">
    <div *ngSwitchCase="'contributors'">
        <ion-list>
            <auth-detail [authId]="t._id.athId" [rank]="i" *ngFor="let t of tops; let i = index" showStyle='full'
                (click)="openLink('https://www.strava.com/athletes/'+t._id.athId)"
                ></auth-detail>
        </ion-list></div>
    <div *ngSwitchCase="'today'">
        <ion-list>
            <auth-detail [authId]="t._id.athId" [rank]="i" [cals]="t.cals" *ngFor="let t of todayTops; let i = index" showStyle='today' (click)="openLink('https://www.strava.com/athletes/'+t._id.athId)"></auth-detail>


        </ion-list></div>
    <div *ngSwitchCase="'activities'">
        <ion-list>
            <ion-item *ngFor="let a of acts" (click)="openLink('https://www.strava.com/activities/'+a.id)">
                    <auth-detail [authId]="a.athId" showStyle='short'></auth-detail>
                    <p>
                    {{ a.name  }}</p>
                <ion-note item-end text-right>
                    {{ format2(a.distance.slice(0,-2)) }} km <br>
                    
                    {{ format(a.calories + "") }} cals</ion-note>
            </ion-item>
        </ion-list>
    </div>
</div>
</div>

</ion-content>
