RTL/src/app/shared/components/data-modal/open-channel/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">
      <div fxLayout="column">
        <div fxLayout="row">
          <div fxFlex="100">
            <mat-expansion-panel>
              <mat-expansion-panel-header>
                <mat-panel-title>
                  <span>{{newlyAdded ? '' : 'Open channel with'}}&nbsp;</span><strong class="font-weight-900">{{peer.alias || peer.address}}</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.pub_key}}</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.address}}</span>
                  </div>
                  <div fxFlex="50">
                      <h4 fxLayoutAlign="start" class="font-bold-500">Inbound</h4>
                      <span class="overflow-wrap foreground-secondary-text">{{peer.inbound ? 'True' : 'False'}}</span>
                    </div>
                  </div>
              </div>
            </mat-expansion-panel>
          </div>
        </div>
        <div fxLayout="column">
          <div fxLayout="row" fxFlex="100">
            <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header mt-2">
              <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-2">
            <mat-form-field fxFlex="60" fxLayoutAlign="start end">
              <input matInput [(ngModel)]="fundingAmount" placeholder="Amount" type="number" step="1000" min="1" max="{{totalBalance}}" tabindex="1" required name="amount" #amount="ngModel">
              <mat-hint>(Remaining Bal: {{totalBalance - ((fundingAmount) ? fundingAmount : 0)}})</mat-hint>
              <span matSuffix> {{information?.smaller_currency_unit}} </span>
            </mat-form-field>
            <div fxFlex="35" fxLayoutAlign="start center">
              <mat-slide-toggle tabindex="2" 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="30" fxLayoutAlign="start end">
              <mat-select tabindex="3" [(value)]="selTransType">
                <mat-option *ngFor="let transType of transTypes" [value]="transType.id">
                  {{transType.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="30" *ngIf="selTransType=='0'">
              <input matInput placeholder="Default" disabled>
            </mat-form-field>
            <mat-form-field fxFlex="30" *ngIf="selTransType=='1'">
              <input matInput [(ngModel)]="transTypeValue.blocks" placeholder="Target Confirmation Blocks" type="number" name="blocks" step="1" min="0" required tabindex="4" #blocks="ngModel">
            </mat-form-field>
            <mat-form-field fxFlex="30" *ngIf="selTransType=='2'">
              <input matInput [(ngModel)]="transTypeValue.fees" placeholder="Fee ({{information?.smaller_currency_unit}}/Byte)" type="number" name="fees" step="1" min="0" required tabindex="5" #fees="ngModel">
            </mat-form-field>
            <div fxFlex="35" fxLayoutAlign="start center">
              <mat-slide-toggle tabindex="6" color="primary" [(ngModel)]="spendUnconfirmed" name="spendUnconfirmed">Spend Unconfirmed Output</mat-slide-toggle>
            </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-raised-button color="primary" (click)="onOpenChannel()" [disabled]="fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="9">
              <p *ngIf="(fundingAmount == null) && (amount.touched || amount.dirty); else openText">Invalid Values</p>
              <ng-template #openText><p>Open Channel</p></ng-template>
            </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-raised-button color="primary" (click)="onOpenChannel()" [disabled]="fundingAmount == null || (totalBalance - ((fundingAmount) ? fundingAmount : 0) < 0)" type="submit" tabindex="8">
              <p *ngIf="(fundingAmount == null) && (amount.touched || amount.dirty); else openText">Invalid Values</p>
              <ng-template #openText><p>Open Channel</p></ng-template>
            </button>
          </div>
        </div>
      </div>
    </mat-card-content>
  </div>
</div>