mempool/frontend/src/app/bisq/bisq-market/bisq-market.component.html

<div class="container-xl">

  <ng-container *ngIf="hlocData$ | async as hlocData; else loadingSpinner">

    <ng-container *ngIf="currency$ | async as currency; else loadingSpinner">
      <h1>{{ currency.market.rtype === 'crypto' ? currency.market.lname : currency.market.rname }} - {{ currency.pair }}</h1>
      <div class="float-left">
        <span class="priceheader">
          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData.hloc[hlocData.hloc.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
          <ng-template #headerPriceCrypto>{{ hlocData.hloc[hlocData.hloc.length - 1].close | number: '1.' + currency.market.rprecision + '-' + currency.market.rprecision }} {{ currency.market.rsymbol }}</ng-template>
        </span> 
      </div>
  
      <form [formGroup]="radioGroupForm" class="mb-3 float-right">
        <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" formControlName="interval">
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')"> 30M
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'hour'" (click)="setFragment('hour')"> 1H
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'half_day'" (click)="setFragment('half_day')"> 12H
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'day'" (click)="setFragment('day')"> 1D
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'week'" (click)="setFragment('week')"> 1W
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'month'" (click)="setFragment('month')"> 1M
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'year'" (click)="setFragment('year')"> 1Y
          </label>
        </div>
      </form>

      <div class="clearfix"></div>

      <div id="graphHolder">
        <div class="text-center loadingChart" [hidden]="!isLoadingGraph">
          <div class="spinner-border text-light"></div>
        </div>
        <app-lightweight-charts [data]="hlocData.hloc" [volumeData]="hlocData.volume" [precision]="currency.market.rtype === 'crypto' ? currency.market.lprecision : currency.market.rprecision"></app-lightweight-charts>      
      </div>

      <br>

      <ng-container *ngIf="offers$ | async as offers; else loadingSpinner">
        <div class="row row-cols-1 row-cols-md-2">
          <ng-container *ngTemplateOutlet="offersList; context: { offers: offers.buys, direction: 'BUY', market: currency.market }"></ng-container>
          <ng-container *ngTemplateOutlet="offersList; context: { offers: offers.sells, direction: 'SELL', market: currency.market }"></ng-container>
        </div>
      </ng-container>

      <br><br>

      <ng-container *ngIf="trades$ | async as trades; else loadingSpinner">
        <h2 i18n="Latest Trades header">Latest Trades</h2>

        <app-bisq-trades [trades$]="trades$" [market]="currency.market"></app-bisq-trades>
      </ng-container>

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

</div>


<ng-template #offersList let-offers="offers" let-direction="direction", let-market="market">
  <div class="col">
    <h2>
      <ng-template [ngIf]="direction === 'BUY'" [ngIfElse]="sellOffers" i18n="Bisq Buy Offers">Buy Offers</ng-template>
      <ng-template #sellOffers i18n="Bisq Sell Offers">Sell Offers</ng-template>
    </h2>

    <table class="table table-borderless table-striped">
      <thead>
        <th i18n>Price</th>
        <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.lsymbol }"></ng-container></th>
        <th><ng-container *ngTemplateOutlet="amount; context: {$implicit: market.rsymbol }"></ng-container></th>
      </thead>
      <tbody>
        <tr *ngFor="let offer of offers">
          <td>
            <ng-container *ngIf="market.rtype === 'fiat'; else priceCrypto"><span class="green-color">{{ offer.price | currency: market.rsymbol }}</span></ng-container>
            <ng-template #priceCrypto>{{ offer.price | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
          </td>
          <td>
            <ng-container *ngIf="market.ltype === 'fiat'; else amountCrypto"><span class="green-color">{{ offer.amount | currency: market.rsymbol }}</span></ng-container>
            <ng-template #amountCrypto>{{ offer.amount | number: '1.2-' + market.lprecision }} {{ market.lsymbol }}</ng-template>
          </td>
          <td>
            <ng-container *ngIf="market.rtype === 'fiat'; else volumeCrypto"><span class="green-color">{{ offer.volume | currency: market.rsymbol }}</span></ng-container>
            <ng-template #volumeCrypto>{{ offer.volume | number: '1.2-' + market.rprecision }} {{ market.rsymbol }}</ng-template>
          </td>
        </tr> 
      </tbody>
    </table>
  </div>
</ng-template>

<ng-template #loadingSpinner>
  <br>
  <br>
  <div class="text-center">
    <div class="spinner-border text-light"></div>
  </div>
</ng-template>

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