RTL/src/app/clightning/peers-channels/channels/open-channel-modal/open-channel.component.html

<div fxLayout="row">
  <div fxFlex="100" class="padding-gap-large">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start">
        <span class="page-title">{{alertTitle}}</span>
      </div>
      <button tabindex="8" fxFlex="5" fxLayoutAlign="center" class="btn-close-x p-0" (click)="onClose()" mat-button>X</button>
    </mat-card-header>
    <mat-card-content class="mt-5px">
      <form fxLayout="column" (ngSubmit)="openChannelForm.form.valid && onOpenChannel()" #openChannelForm="ngForm">
        <mat-expansion-panel class="flat-expansion-panel">
          <mat-expansion-panel-header>
            <mat-panel-title>
              <span>{{newlyAdded ? '' : 'Open channel with'}}&nbsp;</span><strong class="font-weight-900">{{peer.alias || peer.id}}</strong>&nbsp;{{newlyAdded ? 'added as a peer.' : '.'}} 
            </mat-panel-title>
          </mat-expansion-panel-header>
          <div fxLayout="column">
            <div fxLayout="row">
              <div fxFlex="100">
                <h4 fxLayoutAlign="start" class="font-bold-500">Pubkey</h4>
                <span class="foreground-secondary-text">{{peer.id}}</span>
              </div>
            </div>
            <mat-divider class="w-100 my-1"></mat-divider>
            <div fxLayout="row">
              <div fxFlex="50">
                <h4 fxLayoutAlign="start" class="font-bold-500">Address</h4>
                <span class="overflow-wrap foreground-secondary-text">{{peer.netaddr}}</span>
              </div>
              <div fxFlex="50">
                  <h4 fxLayoutAlign="start" class="font-bold-500">Connected</h4>
                  <span class="overflow-wrap foreground-secondary-text">{{peer.connected ? 'True' : 'False'}}</span>
                </div>
              </div>
          </div>
        </mat-expansion-panel>
        <div fxLayout="column" class="bordered-box mt-2 open-inputs-box">
          <div fxLayout="row" fxFlex="100">
            <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
              <div fxFlex="100" fxLayoutAlign="start start">
                <span class="page-title">Open Channel</span>
              </div>
            </mat-card-header>
          </div>
          <div fxLayout="row" fxFlex="100">
            Available balance: {{totalBalance | number}} {{information.smaller_currency_unit}}
          </div>
          <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">
            <mat-form-field fxFlex="48" fxLayoutAlign="start end">
              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" tabindex="2" required name="amount" #amount="ngModel" max="{{totalBalance}}">
              <mat-hint>(Wallet Bal: {{totalBalance}}, Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
              <span matSuffix> {{information?.smaller_currency_unit | titlecase}} </span>
              <mat-error *ngIf="!fundingAmount">Amount is required.</mat-error>
              <mat-error *ngIf="amount.errors?.max">Amount must be less than or equal to {{totalBalance}}.</mat-error>
            </mat-form-field>
            <div fxFlex="48" fxLayoutAlign="start center">
              <mat-slide-toggle tabindex="3" color="primary" [(ngModel)]="isPrivate" name="isPrivate">Private Channel</mat-slide-toggle>
            </div>
          </div>
          <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
            <mat-form-field fxFlex="48" fxLayoutAlign="start end">
              <mat-select tabindex="4" placeholder="Fee Rate" [(value)]="selFeeRate">
                <mat-option *ngFor="let feeRateType of feeRateTypes" [value]="feeRateType.feeRateId">
                  {{feeRateType.feeRateType}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <div fxFlex="48" fxLayout="row" fxLayoutAlign="start center">
              <mat-checkbox fxFlex="2" tabindex="5" color="primary" [(ngModel)]="flgMinConf" name="flgMinConf" fxLayoutAlign="stretch start" class="mr-2"></mat-checkbox>
              <mat-form-field fxFlex="98">
                <input matInput [(ngModel)]="minConfValue" placeholder="Min Confirmation Blocks" type="number" name="blocks" step="1" min="0" tabindex="8" #blocks="ngModel" [required]="flgMinConf" [disabled]="!flgMinConf">
                <mat-error *ngIf="flgMinConf && !minConfValue">Min Confirmation Blocks is required.</mat-error>
              </mat-form-field>
            </div>
          </div>
        </div>
        <div class="mt-2" fxLayout="row" fxLayoutAlign="end center">
          <div *ngIf="newlyAdded" fxLayoutAlign="space-between center" fxFlex="60">
            <button fxFlex="33" fxLayoutAlign="center center" mat-stroked-button color="warn" (click)="onClose()" tabindex="7">Do It Later</button>
            <button fxFlex="32" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="8" type="reset" (click)="resetData()">Clear Field</button>
            <button autoFocus fxFlex="33" fxLayoutAlign="center center" mat-flat-button color="primary" type="submit" tabindex="9">Open Channel</button>
          </div>
          <div *ngIf="!newlyAdded" fxLayout="row" fxLayoutAlign="space-between stretch" fxFlex="30" class="mt-2">
            <button fxFlex="48" fxLayoutAlign="center center" mat-stroked-button color="primary" tabindex="7" type="reset" (click)="resetData()">Clear Field</button>
            <button autoFocus fxFlex="48" fxLayoutAlign="center center" mat-flat-button color="primary" type="submit" tabindex="8">Open Channel</button>
          </div>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>