<div class="box preview-box" *ngIf="address && !error">
  <app-preview-title>
    <span i18n="shared.address">Address</span>
  </app-preview-title>
  <div class="row">
    <div class="col-md table-col">
      <div class="row d-flex justify-content-between">
        <div class="title-wrapper">
          <h1 class="title"><app-truncate [text]="addressString"></app-truncate></h1>
        </div>
      </div>
      <table class="table table-borderless table-striped">
        <tbody>
          <tr *ngIf="addressInfo && addressInfo.unconfidential">
            <td i18n="address.unconfidential">Unconfidential</td>
            <td>
              <app-truncate [text]="addressInfo.unconfidential" [lastChars]="7" [link]="['/address/' | relativeUrl, addressInfo.unconfidential]"></app-truncate>
            </td>
          </tr>
          <ng-template [ngIf]="!address.electrum">
            <tr>
              <td i18n="address.total-received">Total received</td>
              <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received" [noFiat]="true"></app-amount></td>
            </tr>
            <tr>
              <td i18n="address.total-sent">Total sent</td>
              <td *ngIf="address.chain_stats.spent_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="sent" [noFiat]="true"></app-amount></td>
            </tr>
          </ng-template>
          <tr>
            <td i18n="address.balance">Balance</td>
            <td *ngIf="address.chain_stats.funded_txo_sum !== undefined; else confidentialTd"><app-amount [satoshis]="received - sent" [noFiat]="true"></app-amount></td>
          </tr>
          <tr>
            <td i18n="address.transactions">Transactions</td>
            <td>{{ txCount | number }}</td>
          </tr>
          <tr>
            <td i18n="address.unspent_txos">Unspent TXOs</td>
            <td>{{ totalUnspent | number }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="w-100 d-block d-md-none"></div>
    <div class="col-md qrcode-col">
      <div class="qr-wrapper">
        <app-qrcode [data]="address.address" [size]="448"></app-qrcode>
      </div>
    </div>
  </div>
</div>

<ng-template #confidentialTd>
  <td i18n="shared.confidential">Confidential</td>
</ng-template>
