<div id="modalDetail" tabindex="-1" role="dialog" aria-labelledby="modal_detail" aria-hidden="true">
  <div class="modal-dialog modalBg" role="document">
    <div>
      <div class="modal-header">
        <div class="bubble"><i class="icon-block"></i></div>
      </div>
      <div class="modal-body">
        <h5 class="modal-title text-uppercase" id="modalDetail">Transaction Details</h5>
        <ul class="list-inline row">
          <li class="list-inline-item col blockLabel">Type</li>
          <li class="list-inline-item col-8 blockText text-capitalize">{{ transaction.transactionType }}</li>
        </ul>
        <ul class="list-inline row">
          <li class="list-inline-item col blockLabel">Amount</li>
          <li *ngIf="transaction.transactionType == 'received'" class="list-inline-item col-8 blockText text-success">{{ transaction.transactionAmount | coinNotation }} {{ coinUnit }}</li>
          <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-8 blockText text-danger">-{{ transaction.transactionAmount + transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
        </ul>
        <!-- <ul class="list-inline row" *ngIf="transaction.transactionType == 'sent'">
            <li class="list-inline-item col blockLabel">Fee</li>
            <li *ngIf="transaction.transactionType == 'sent'" class="list-inline-item col-8 blockText text-danger">{{ transaction.transactionFee | coinNotation }}  {{ coinUnit }}</li>
        </ul> -->
        <ul class="list-inline row">
          <li class="list-inline-item col blockLabel">Date</li>
          <li class="list-inline-item col-8 blockText">{{ transaction.transactionTimestamp * 1000 | date:'medium' }}</li>
        </ul>
        <ul *ngIf="transaction.transactionConfirmedInBlock" class="list-inline row">
          <li class="list-inline-item col blockLabel">Block</li>
          <li class="list-inline-item col-8 blockText">#{{ transaction.transactionConfirmedInBlock }}</li>
        </ul>
        <ul class="list-inline row">
            <li class="list-inline-item col blockLabel">Confirmations</li>
            <li class="list-inline-item col-8 blockText">{{ confirmations }}</li>
        </ul>
        <ul class="list-inline row">
          <li class="list-inline-item col blockLabel mb-3">Transaction ID</li>
          <li class="list-inline-item col-10 blockID"><code>{{ transaction.transactionId }}</code></li>
          <span class="float-right"><a ngxClipboard [cbContent]="transaction.transactionId" (click)="onCopiedClick()">copy</a></span>
          <div class="col-12">
            <span class="badge badge-success list-inline-item col" *ngIf="copied">The transaction ID has been copied to your clipboard.</span>
          </div>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-lg btn-primary" data-dismiss="modal" aria-label="Close" (click)="activeModal.close('Close click')">OK</button>
      </div>
    </div>
  </div>
</div>