<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">Close Channel</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">
        <div fxLayout="column" class="bordered-box my-2 p-2">
          <p fxLayoutAlign="start center" class="pb-1 word-break">Closing channel: {{channelToClose.channel_point}}</p>
          <div fxLayoutAlign="space-between center">
            <mat-form-field fxFlex.gt-sm="48">
              <mat-select [(value)]="selTransType" tabindex="1" [disabled]="!channelToClose.active">
                <mat-option *ngFor="let transType of transTypes" [value]="transType.id">
                  {{transType.name}}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <mat-form-field fxFlex="48" *ngIf="selTransType=='0'">
              <input matInput placeholder="Default" disabled>
            </mat-form-field>
            <mat-form-field fxFlex.gt-sm="48" fxLayoutAlign="start end" *ngIf="selTransType=='1'">
              <input matInput [(ngModel)]="blocks" placeholder="Number of Blocks" type="number" name="blocks" step="1"
                min="0" required tabindex="2" #blcks="ngModel">
              <mat-error *ngIf="!blocks">Number of blocks is required.</mat-error>
            </mat-form-field>
            <mat-form-field fxFlex.gt-sm="48" fxLayoutAlign="start end" *ngIf="selTransType=='2'">
              <input matInput [(ngModel)]="fees" placeholder="Fees (Sats/Byte)"
                type="number" name="fees" step="1" min="0" required tabindex="3" #fee="ngModel">
              <mat-error *ngIf="!fees">Fees is required.</mat-error>
            </mat-form-field>
          </div>        
        </div>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button mat-stroked-button color="primary" type="reset" class="mr-1" (click)="resetData()" tabindex="2" default>Clear</button>
          <button mat-flat-button color="primary" type="submit" tabindex="4" (click)="onCloseChannel()">Close Channel</button>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>
