<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">Send Payment</span>
      </div>
      <button fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" default mat-button [mat-dialog-close]="false">X</button>
    </mat-card-header>
    <mat-card-content class="padding-gap-x-large" fxLayout="column">
      <div *ngIf="recommendedFee.minimumFee" fxFlex="100" class="alert alert-info mb-2">
        <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle" />
        <span fxLayout="column" fxFlex="100">
          <div>Fee rates recommended by mempool (sat/vByte):</div>
          <span class="pr-2" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start">
            <span>- High: {{recommendedFee.fastestFee || 'Unknown'}}</span>
            <span>- Medium: {{recommendedFee.halfHourFee || 'Unknown'}}</span>
            <span>- Low: {{recommendedFee.hourFee || 'Unknown'}}</span>
            <span>- Economy: {{recommendedFee.economyFee || 'Unknown'}}</span>
            <span>- Minimum: {{recommendedFee.minimumFee || 'Unknown'}}</span>
          </span>
        </span>
      </div>
      <form #form="ngForm" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between start" class="overflow-x-hidden" (submit)="onSendFunds()" (reset)="resetData()">
        <mat-form-field fxLayout="column" fxFlex="55">
          <mat-label>Bitcoin Address</mat-label>
          <input #addrs="ngModel" matInput autoFocus name="addr" required [(ngModel)]="transaction.address">
          <mat-error *ngIf="!transaction.address">Bitcoin address is required.</mat-error>
        </mat-form-field>
        <mat-form-field fxLayout="column" fxFlex="30">
          <mat-label>Amount</mat-label>
          <input #amnt="ngModel" matInput name="amt" type="number" required [step]="100" [min]="0" [(ngModel)]="transaction.amount">
          <span matSuffix>{{selAmountUnit}} </span>
          <mat-error *ngIf="!transaction.amount">{{amountError}}</mat-error>
        </mat-form-field>
        <mat-form-field fxLayout="column" fxFlex="10" fxLayoutAlign="start end">
          <mat-label>Amount Unit</mat-label>
          <mat-select required name="amountUnit" [value]="selAmountUnit" (selectionChange)="onAmountUnitChange($event)">
            <mat-option *ngFor="let amountUnit of amountUnits" [value]="amountUnit">{{amountUnit}}</mat-option>
          </mat-select>
        </mat-form-field>
        <div fxFlex="60" fxLayoutAlign="space-between stretch" fxLayout="row wrap">
          <mat-form-field fxLayout="column" fxFlex="48" fxLayoutAlign="start center">
            <mat-label>Target Confirmation Blocks</mat-label>
            <input #blocks="ngModel" matInput type="number" name="blocks" required="true" [step]="1" [min]="0" [(ngModel)]="transaction.blocks">
            <mat-error *ngIf="!transaction.blocks">Target Confirmation Blocks is required.</mat-error>
          </mat-form-field>
        </div>
        <div fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch"></div>
        <div *ngIf="sendFundError !== ''" fxFlex="100" class="alert alert-danger mt-1">
          <fa-icon class="mr-1 alert-icon" [icon]="faExclamationTriangle" />
          <span *ngIf="sendFundError !== ''">{{sendFundError}}</span>
        </div>
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="end center">
          <button class="mr-1" mat-button color="primary" type="reset">Clear Fields</button>
          <button mat-button color="primary" type="submit">Send Funds</button>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>
