<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="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>
      </div>
  
      <form [formGroup]="radioGroupForm" class="mb-3 radio-form">
        <div class="btn-group btn-group-toggle" name="radioBasic">
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'half_hour'">
            <input type="radio" [value]="'half_hour'" (click)="setFragment('half_hour')" formControlName="interval"> 30M
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'hour'">
            <input type="radio" [value]="'hour'" (click)="setFragment('hour')" formControlName="interval"> 1H
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'half_day'">
            <input type="radio" [value]="'half_day'" (click)="setFragment('half_day')" formControlName="interval"> 12H
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'day'">
            <input type="radio" [value]="'day'" (click)="setFragment('day')" formControlName="interval"> 1D
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'week'">
            <input type="radio" [value]="'week'" (click)="setFragment('week')" formControlName="interval"> 1W
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'month'">
            <input type="radio" [value]="'month'" (click)="setFragment('month')" formControlName="interval"> 1M
          </label>
          <label class="btn btn-primary btn-sm" [class.active]="radioGroupForm.get('interval').value === 'year'">
            <input type="radio" [value]="'year'" (click)="setFragment('year')" formControlName="interval"> 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>
    <div class="table-container">
      <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 }} <span class="symbol">{{ market.rsymbol }}</span></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 }} <span class="symbol">{{ market.lsymbol }}</span></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 }} <span class="symbol">{{ market.rsymbol }}</span></ng-template>
            </td>
          </tr> 
        </tbody>
      </table>
    </div>
  </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>
