<div class="wrapper">

  @if (!minimal) {
    <span *ngIf="paymentStatus === 3" class="valid-feedback d-block mt-5">
      Payment successful. You can close this page.
    </span>

    <span *ngIf="paymentStatus === 4" class="valid-feedback d-block mt-5">
      A transaction <a [href]="'/tx/' + invoice.cryptoInfo[0].payments[0].id.split('-')[0]">has been detected in the mempool</a> fully paying for this invoice. Waiting for on-chain confirmation.
    </span>
  }

  <div class="d-flex justify-content-center">
    <app-mempool-error *ngIf="paymentErrorMessage" [error]="paymentErrorMessage"></app-mempool-error>
  </div>

  <div *ngIf="paymentStatus === 2">
    
    <ng-template [ngIf]="invoice && qrCodeString.length">

        <div class="qr-wrapper">
          <a [href]="bypassSecurityTrustUrl(qrCodeString)" target="_blank">
              <app-qrcode imageUrl="/resources/bitcoin-logo.png" [size]="200" [data]="qrCodeString"></app-qrcode>
          </a>
        </div>
        
        <div class="input-group input-group-sm info-group mb-0">
          <input type="text" class="form-control input-dark" readonly [value]="qrCodeString">
          <app-clipboard [button]="true" [class]="'btn btn-outline-secondary rounded-start-0'" [text]="qrCodeString"></app-clipboard>
        </div>
        @if (!minimal) {
          <p>{{ invoice.btcDue | number: '1.0-8' }} <span class="symbol">BTC</span></p>
        }

    </ng-template>

    @if (!minimal) {
      <p>Waiting for transaction... </p>
      <div class="spinner-border text-light"></div>
    }
  </div>
</div>
