<div class="table-container">
  <table class="table table-borderless table-striped">
    <thead>
      <th i18n>Date</th>
      <th *ngIf="view === 'all'" i18n>Price</th>
      <th><ng-container *ngTemplateOutlet="amount; context: {$implicit:  'BTC' }"></ng-container></th>
      <th>
        <ng-template [ngIf]="market" [ngIfElse]="noMarket"><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol === 'BTC' ? market.rsymbol : market.lsymbol }"></ng-container></ng-template>
        <ng-template #noMarket i18n>Amount</ng-template>
      </th>
    </thead>
    <tbody *ngIf="(trades$ | async) as trades; else loadingTmpl">
      <tr *ngFor="let trade of trades;">
        <td>
          &lrm;{{ trade.trade_date | date:'yyyy-MM-dd HH:mm' }}
        </td>
        <td *ngIf="view === 'all'">
          <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ trade.price | currency: (trade._market || market).rsymbol }}</span></ng-container>
          <ng-template #priceCrypto>{{ trade.price | number: '1.2-' + (trade._market || market).rprecision }} <span class="symbol">{{ (trade._market || market).rsymbol }}</span></ng-template>
        </td>
        <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeVolume : tradeAmount"></ng-container>
        <ng-container *ngTemplateOutlet="(trade._market || market).rsymbol === 'BTC' ? tradeAmount : tradeVolume"></ng-container>
        <ng-template #tradeAmount>
          <td>
            <ng-container *ngIf="(trade._market || market).ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ trade.amount | currency: (trade._market || market).rsymbol }}</span></ng-container>
            <ng-template #amountCrypto>{{ trade.amount | number: '1.2-' + (trade._market || market).lprecision }} <span class="symbol">{{ (trade._market || market).lsymbol }}</span></ng-template>
          </td>
        </ng-template>
        <ng-template #tradeVolume>
          <td>
            <ng-container *ngIf="(trade._market || market).rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ trade.volume | currency: (trade._market || market).rsymbol }}</span></ng-container>
            <ng-template #volumeCrypto>{{ trade.volume | number: '1.2-' + (trade._market || market).rprecision }} <span class="symbol">{{ (trade._market || market).rsymbol }}</span></ng-template>
          </td>
        </ng-template>
      </tr> 
    </tbody>
  </table>
</div>

<ng-template #loadingTmpl>
  <tr *ngFor="let i of [1,2,3,4,5,6,7,8,9,10]">
    <td *ngFor="let j of loadingColumns"><span class="skeleton-loader"></span></td>
  </tr>
</ng-template>

<ng-template #amount let-i i18n="Trade amount (Symbol)">Amount ({{ i }})</ng-template>
