<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">{{channelToClose.active ? 'Close Channel' : 'Force Close Channel'}}</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">{{
            channelToClose.active ? 
            ('Closing channel: ' + ((!channelToClose.remote_alias && !channelToClose.chan_id) ? channelToClose.channel_point : (channelToClose.remote_alias && channelToClose.chan_id) ? channelToClose.remote_alias + ' (' + channelToClose.chan_id + ')' : channelToClose.remote_alias ? channelToClose.remote_alias : channelToClose.chan_id)) : 
            ('Force closing channel: ' + ((!channelToClose.remote_alias && !channelToClose.chan_id) ? channelToClose.channel_point : (channelToClose.remote_alias && channelToClose.chan_id) ? channelToClose.remote_alias + ' (' + channelToClose.chan_id + ')' : channelToClose.remote_alias ? channelToClose.remote_alias : channelToClose.chan_id))}}
          </p>
          <div *ngIf="flgPendingHtlcs" fxLayoutAlign="start center">
            <p fxFlex="100" fxLayoutAlign="start center" class="color-warn"><mat-icon class="mr-1 icon-small">close</mat-icon>{{errorMsg}}</p>
          </div>
          <div *ngIf="!flgPendingHtlcs" fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
            <div *ngIf="!channelToClose.active" fxFlex="100" class="alert alert-info">
              <fa-icon class="mr-1 alert-icon" [icon]="faInfoCircle"></fa-icon>
              <span>Priority/Fee for force closing inactive channels cannot be modified.</span>
            </div>
            <div fxLayout="row" fxFlex="100" fxLayoutAlign="space-between center">
              <mat-form-field fxLayout="column" fxFlex.gt-sm="48">
                <mat-select tabindex="1" [disabled]="!channelToClose.active" [(value)]="selTransType">
                  <mat-option *ngFor="let transType of transTypes" [value]="transType.id">
                    {{transType.name}}
                  </mat-option>
                </mat-select>
              </mat-form-field>
              <mat-form-field *ngIf="selTransType === '0'" fxFlex="48">
                <mat-label>Default</mat-label>
                <input matInput disabled>
              </mat-form-field>
              <mat-form-field *ngIf="selTransType === '1'" fxFlex.gt-sm="48" fxLayoutAlign="start end">
                <mat-label>Number of Blocks</mat-label>
                <input #blcks="ngModel" matInput type="number" name="blocks" required
                  tabindex="2" [step]="1" [min]="0" [(ngModel)]="blocks">
                <mat-error *ngIf="!blocks">Number of blocks is required.</mat-error>
              </mat-form-field>
              <mat-form-field *ngIf="selTransType === '2'" fxFlex.gt-sm="48" fxLayoutAlign="start end">
                <mat-label>Fees (Sats/vByte)</mat-label>
                <input #clchfee="ngModel" matInput
                  type="number" name="ccfees" required tabindex="3" [step]="1" [min]="0" [(ngModel)]="fees">
                <mat-error *ngIf="!fees">Fees is required.</mat-error>
              </mat-form-field>
            </div>
          </div>        
        </div>
        <div fxLayout="row" fxLayoutAlign="end center">
          <button *ngIf="channelToClose.active && !flgPendingHtlcs" mat-button color="primary" type="reset" class="mr-1" tabindex="3" default (click)="resetData()">Clear</button>
          <button *ngIf="!flgPendingHtlcs" mat-button color="primary" type="submit" tabindex="4" (click)="onCloseChannel()">{{channelToClose.active ? 'Close Channel' : 'Force Close'}}</button>
          <button *ngIf="flgPendingHtlcs" mat-button color="primary" type="submit" tabindex="5" (click)="onClose()">Ok</button>
        </div>
      </form>
    </mat-card-content>
  </div>
</div>
