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

<div class="container-xl">

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

    <ng-container *ngIf="currency$ | async as currency">
      <h1>{{ currency.market.lname }} - {{ currency.pair }}</h1>
      <div class="float-left">
        <span class="priceheader">
          <ng-container *ngIf="currency.market.rtype === 'fiat'; else headerPriceCrypto"><span class="green-color">{{ hlocData[hlocData.length - 1].close | currency: currency.market.rsymbol }}</span></ng-container>
          <ng-template #headerPriceCrypto>{{ hlocData[hlocData.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]="'minute'"> 1M
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'half_hour'"> 30M
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'hour'"> 1H
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'half_day'"> 12H
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'day'"> 1D
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'week'"> 1W
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'month'"> 1M
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'year'"> 1Y
          </label>
          <label ngbButtonLabel class="btn-primary btn-sm">
            <input ngbButton type="radio" [value]="'auto'" fragment="auto"> Auto
          </label>
        </div>
      </form>

      <app-lightweight-charts [data]="hlocData"></app-lightweight-charts>

      <br>

      <ng-container *ngIf="offers$ | async as offers">
        <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>
    </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">Buy Offers</ng-template>
      <ng-template #sellOffers>Sell Offers</ng-template>
    </h2>

    <table class="table table-borderless table-striped">
      <thead>
        <th i18n>Price</th>
        <th i18n>Amount ({{ market.lsymbol }})</th>
        <th i18n>Amount ({{ market.rsymbol }})</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>