<div class="container-xl">
  <h1 style="float: left;" i18n="BSQ statistics header">BSQ statistics</h1>
  <br>

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

  <div class="row">
    <div class="col-sm">
      <table class="table table-borderless table-striped">
        <tbody *ngIf="!isLoading; else loadingTemplate">
          <tr>
            <td class="td-width" i18n="BSQ existing amount">Existing amount</td>
            <td>{{ (stats.minted - stats.burnt) / 100 | number: '1.2-2' }} BSQ</td>
          </tr>
          <tr>
            <td i18n="BSQ minted amount">Minted amount</td>
            <td>{{ stats.minted | number: '1.2-2' }} BSQ</td>
          </tr>
          <tr>
            <td i18n="BSQ burnt amount">Burnt amount</td>
            <td>{{ stats.burnt | number: '1.2-2' }} BSQ</td>
          </tr>
          <tr>
            <td i18n="BSQ addresses">Addresses</td>
            <td>{{ stats.addresses | number }}</td>
          </tr>
          <tr>
            <td i18n="BSQ unspent transaction outputs">Unspent TXOs</td>
            <td>{{ stats.unspent_txos | number }}</td>
          </tr>
          <tr>
            <td i18n="BSQ spent transaction outputs">Spent TXOs</td>
            <td>{{ stats.spent_txos | number }}</td>
          </tr>
          <tr>
            <td i18n="BSQ token price">Price</td>
            <td><app-fiat [value]="price"></app-fiat></td>
          </tr>
          <tr>
            <td i18n="BSQ token market cap">Market cap</td>
            <td><app-fiat [value]="price * (stats.minted - stats.burnt) / 100"></app-fiat></td>
          </tr>
        </tbody>
      </table>

    </div>
    <div class="col-sm"></div>
  </div>
</div>

<ng-template #loadingTemplate>
  <tbody>
    <tr>
      <td class="td-width" i18n>Existing amount</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Minted amount</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Burnt amount</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Addresses</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Unspent TXOs</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td>Spent TXOs</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Price</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
    <tr>
      <td i18n>Market cap</td>
      <td><span class="skeleton-loader"></span></td>
    </tr>
  </tbody>
</ng-template>