<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 matTooltip="{{'Link to ' + selNode.settings.blockExplorerUrl}}" class="ml-1 fa-icon-primary" [icon]="faUpRightFromSquare" (click)="onExplorerClicked(bumpFeeChannel?.funding_txid)"/>
            </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" />
                <span fxLayout="column" fxFlex="100">
                  <div>Fee rates recommended by mempool (sat/vByte):</div>
                  <div>- High: {{recommendedFee.fastestFee || 'Unknown'}}</div>
                  <div>- Medium: {{recommendedFee.halfHourFee || 'Unknown'}}</div>
                  <div>- Low: {{recommendedFee.hourFee || 'Unknown'}}</div>
                </span>
              </div>
              <div *ngIf="flgShowDustWarning" fxFlex="100" class="alert alert-warn">
                <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
                <span>Change output balance <strong>{{dustOutputValue | number}}</strong> (Sats) may be insufficient for fee bumping, depending on the prevailing fee rates.</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 #outputIndx="ngModel" autoFocus matInput type="number" tabindex="1" required name="outputIndx" [step]="1" [min]="0" [(ngModel)]="outputIndex">
                  <mat-error *ngIf="outputIndx.errors?.required">Output Index required.</mat-error>
                  <mat-error *ngIf="outputIndx.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" />
                <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>
  