<div class="container-xl">

  <h1 i18n="Bisq markets title">Bisq Trading Volume</h1>

  <div id="volumeHolder">
    <ng-template #loadingVolumes>
      <div class="text-center loadingVolumes">
        <div class="spinner-border text-light"></div>
      </div>  
    </ng-template>
    <ng-container *ngIf="volumes$ | async as volumes; else loadingVolumes">
      <app-lightweight-charts-area [data]="volumes.data" [lineData]="volumes.linesData"></app-lightweight-charts-area>
    </ng-container>
  </div>

  <br><br>

  <div class="container-info">
    <h1>
      <ng-template [ngIf]="stateService.env.OFFICIAL_BISQ_MARKETS" [ngIfElse]="nonOfficialMarkets" i18n="Bisq All Markets">Markets</ng-template>
      <ng-template #nonOfficialMarkets i18n="Bisq Bitcoin Markets">Bitcoin Markets</ng-template>
    </h1>
    <ng-container *ngIf="{ value: (tickers$ | async) } as tickers">
      <div class="table-container">
        <table class="table table-borderless table-striped">
          <thead>
            <th><ng-container i18n>Currency</ng-container> <button [disabled]="(sort$ | async) === 'name'" class="btn btn-link btn-sm" (click)="sort('name')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
            <th i18n>Price</th>
            <th><ng-container i18n="Trading volume 7D">Volume (7d)</ng-container> <button [disabled]="(sort$ | async) === 'volumes'" class="btn btn-link btn-sm" (click)="sort('volumes')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
            <th><ng-container i18n="Trades amount 7D">Trades (7d)</ng-container> <button [disabled]="(sort$ | async) === 'trades'" class="btn btn-link btn-sm" (click)="sort('trades')"><fa-icon [icon]="['fas', 'chevron-down']" [fixedWidth]="true"></fa-icon></button></th>
          </thead>
          <tbody *ngIf="tickers.value; else loadingTmpl">
            <tr *ngFor="let ticker of tickers.value; trackBy: trackByFn;">
              <td><a [routerLink]="['/market' | relativeUrl, ticker.pair_url]">{{ ticker.name }})</a></td>
              <td>
                <app-fiat *ngIf="ticker.market.rtype === 'crypto'; else fiat" [value]="ticker.last * 100000000"></app-fiat>
                <ng-template #fiat>
                  <span class="green-color">{{ ticker.last | currency: ticker.market.rsymbol }}</span>
                </ng-template>
              </td>
              <td>
                <app-fiat [value]="ticker.volume?.volume"></app-fiat>
              </td>
              <td>{{ ticker.volume?.num_trades ? ticker.volume?.num_trades : 0 }}</td>
            </tr> 
          </tbody>
        </table>
      </div>

      <br><br>

      <h2 i18n="Latest Trades header">Latest Trades</h2>
      <app-bisq-trades [trades$]="trades$"></app-bisq-trades>

    </ng-container>
  </div>
</div>

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