<div fxLayout="row">
    <div fxFlex="100">
      <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
        <div fxFlex="95" fxLayoutAlign="start start">
          <span class="page-title">Bump Fee</span>
        </div>
        <button tabindex="8" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
      </mat-card-header>    
      <mat-card-content class="padding-gap-x-large">
        <form fxLayout="column">
          <div fxLayout="column" class="bordered-box mb-1 p-2">
            <p fxLayoutAlign="start center" class="pb-1 word-break">Bump fee for transaction id: {{bumpFeeChannel?.funding_txid}}
              <fa-icon class="ml-1" matSuffix rtlClipboard matTooltip="Copy transaction ID" [icon]="faCopy" [payload]="bumpFeeChannel?.funding_txid" (copied)="onCopyID($event)"></fa-icon>
            </p>
            <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
              <div fxFlex="100" class="alert alert-info">
                <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle"></fa-icon>
                <span fxLayout="column" fxFlex="100">Bumping fee on pending open channels is an advanced feature, attempt it only if you are familiar with the functionality of Bitcoin transactions.
                  <div>Before attempting fee bump ensure the following:</div>
                  <div class="pl-1">1: Use a Bitcoin block explorer to ensure that channel opening transaction is not confirmed.</div>
                  <div class="pl-1">2: The channel opening transaction must have a sizable change output, which can be spent further. The fee cannot be bumped without the change output.</div>
                  <div class="pl-1">3: Find the index value of the change output via a block explorer.</div>
                  <div class="pl-1">4: Enter the index value of the change output in the form below and the desired fee rate.</div>
                  <div class="pl-1">5: Upon successful fee bump, use your block explorer to track the child transaction in the mempool, which should be linked with the change output transaction.</div>
                </span>
              </div>
              <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Output Index</mat-label>
                  <input #outputIdx="ngModel" autoFocus matInput type="number" tabindex="1" required name="outputIdx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
                  <mat-error *ngIf="outputIdx.errors?.required">Output Index required.</mat-error>
                  <mat-error *ngIf="outputIdx.errors?.pendingChannelOutputIndex">Invalid index value.</mat-error>
                </mat-form-field>
                <mat-form-field fxLayout="column" fxFlex="49">
                  <mat-label>Fees (Sats/vByte)</mat-label>
                  <input #fee="ngModel" matInput
                    type="number" name="fees" required tabindex="4" [step]="1" [min]="0" [(ngModel)]="fees">
                  <mat-error *ngIf="!fees">Fees is required.</mat-error>
                </mat-form-field>
              </div>
              <div *ngIf="bumpFeeError !== ''" fxFlex="100" class="alert alert-danger mt-1">
                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle"></fa-icon>
                <span>{{bumpFeeError}}</span>
              </div>
            </div>
          </div>
          <div fxLayout="row" fxLayoutAlign="end center">
            <button mat-button color="primary" type="reset" class="mr-1" tabindex="5" default (click)="resetData()">Clear</button>
            <button mat-button color="primary" type="submit" tabindex="6" (click)="onBumpFee()">{{bumpFeeError !== '' ? 'Retry Bump Fee' : 'Bump Fee'}}</button>
          </div>
        </form>
      </mat-card-content>
    </div>
  </div>
  