<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" class="btn-close-x p-0" (click)="onClose()" mat-button>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 [icon]="faInfoCircle" class="mr-1 alert-icon"></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 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/vByte)"
                  type="number" name="ccfees" [step]="1" [min]="0" required tabindex="3" #clchfee="ngModel">
                <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" (click)="resetData()" tabindex="3" default>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>
