<footer class="footer">
  <div class="container-xl">
    <div class="row text-center" *ngIf="mempoolInfoData$ | async as mempoolInfoData">
      <div class="col d-none d-sm-block">
        <span class="txPerSecond" i18n="footer.tx-vbytes-per-second">Tx vBytes per second:</span>
        <span *ngIf="mempoolInfoData.vBytesPerSecond === 0; else inSync">
          &nbsp;<span class="badge badge-pill badge-warning" i18n="footer.backend-is-synchronizing">Backend is synchronizing</span>
        </span>
        <ng-template #inSync>
          <div class="progress sub-text">
            <div class="progress-bar {{ mempoolInfoData.progressClass }}" role="progressbar" [ngStyle]="{'width': mempoolInfoData.progressWidth}">{{ mempoolInfoData.vBytesPerSecond | ceil | number }} <span i18n="shared.vbytes-per-second">vBytes/s</span></div>
          </div>
        </ng-template>    
      </div>
      <div class="col">
        <span class="unconfirmedTx"><span i18n="shared.unconfirmed">Unconfirmed</span> <span class="extra-text" i18n="shared.transactions">transactions</span>:</span>
        <div class="sub-text">{{ mempoolInfoData.memPoolInfo.size | number }}</div>
      </div>
      <div class="col">
        <span class="mempoolSize" i18n="footer.mempool-size">Mempool size:</span>
        <div class="sub-text" *ngIf="(mempoolBlocksData$ | async) as mempoolBlocksData">{{ mempoolBlocksData.size | bytes }} ({{ mempoolBlocksData.blocks }} block<span [hidden]="mempoolBlocksData.blocks <= 1">s</span>)</div>
      </div>
    </div>
  </div>
</footer>
