<ion-header>
  <head-nav [title]="'Blocks'"></head-nav>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col><b>Height</b></ion-col>
      <ion-col><b>Timestamp</b></ion-col>
      <ion-col text-right><b>Transactions</b></ion-col>
      <ion-col><b>Mined By</b></ion-col>
      <ion-col text-right><b>Size</b></ion-col>
    </ion-row>
    <ion-row *ngFor="let block of blocks | async">
      <ion-col>
        <a (click)="goToBlock(block.hash)">{{block.height}}</a>
      </ion-col>
      <ion-col>
        {{ block.timestamp * 1000 | date:'medium' }}
      </ion-col>
      <ion-col text-right>
        {{block.transactionCount}}
      </ion-col>
      <ion-col>
        <a *ngIf="block.poolName" href="{{block.url}}">{{block.poolName}}</a>
      </ion-col>
      <ion-col text-right>
        {{ block.size }}
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>
