<div *ngIf="!flgShowInfo" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" [@opacityAnimation]>
  <div fxFlex="100">
    <mat-card-header fxLayout="row" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxLayoutAlign="start start" [fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '83' : '91'"><span class="page-title">{{channel ? ('Channel ' + loopDirectionCaption) : loopDirectionCaption}}</span></div>
      <div fxLayoutAlign="space-between end" [fxFlex]="screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM ? '17' : '9'">
        <button tabindex="21" class="btn-close-x p-0" mat-button (click)="showInfo()">?</button>
        <button tabindex="22" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
      </div>
    </mat-card-header>
    <mat-card-content class="padding-gap-x-large">
      <div fxLayout="column">
        <div *ngIf="channel" class="padding-gap-large" fxLayout="row wrap" fxLayoutAlign="space-between stretch">
          <p fxFlex="40"><strong>Channel Peer:&nbsp;</strong>{{channel.remote_alias | titlecase}}</p>
          <p fxFlex="30"><strong>Channel ID:&nbsp;</strong>{{channel.chan_id}}</p>
          <p fxFlex="30"></p>
        </div>
        <mat-vertical-stepper #stepper [linear]="true" (selectionChange)="stepSelectionChanged($event)">
          <mat-step [stepControl]="inputFormGroup" [editable]="flgEditable">
            <form fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="inputFormGroup">
              <ng-template matStepLabel>{{inputFormLabel}}</ng-template>
              <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
                <rtl-loop-quote [quote]="minQuote" [termCaption]="'min'" [panelExpanded]="false" [showPanel]="true" />
                <rtl-loop-quote [quote]="maxQuote" [termCaption]="'max'" [panelExpanded]="false" [showPanel]="true" />
              </div>
              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between center" class="mt-1">  
                <mat-form-field [fxFlex]="direction === LoopTypeEnum.LOOP_OUT ? '35' : '48'">
                  <mat-label>Amount</mat-label>
                  <input autoFocus matInput type="number" tabindex="1" formControlName="amount" required [step]="1000">
                  <mat-hint>Range: {{minQuote.amount | number}}-{{maxQuote.amount | number}}</mat-hint>
                  <span matSuffix>Sats</span>
                  <mat-error *ngIf="inputFormGroup.controls.amount.errors?.required">Amount is required.</mat-error>
                  <mat-error *ngIf="inputFormGroup.controls.amount.errors?.min">Amount must be greater than or equal to {{minQuote.amount | number}}.</mat-error>
                  <mat-error *ngIf="inputFormGroup.controls.amount.errors?.max">Amount must be less than or equal to {{maxQuote.amount | number}}.</mat-error>
                </mat-form-field>
                <mat-form-field [fxFlex]="direction === LoopTypeEnum.LOOP_OUT ? '30' : '48'">
                  <mat-label>Sweep Confirmation Target</mat-label>
                  <input matInput type="number" tabindex="2" formControlName="sweepConfTarget" required [step]="1">
                  <mat-error *ngIf="inputFormGroup.controls.sweepConfTarget.errors?.required">Confirmation target is required.</mat-error>
                  <mat-error *ngIf="inputFormGroup.controls.sweepConfTarget.errors?.min">Confirmation target must be a positive number.</mat-error>
                </mat-form-field>
                <mat-form-field *ngIf="direction === LoopTypeEnum.LOOP_OUT" fxFlex="30">
                  <mat-label>Max Off-chain Routing Fee (%)</mat-label>
                  <input matInput type="number" tabindex="3" formControlName="routingFeePercent" required [step]="1">
                  <mat-error *ngIf="inputFormGroup.controls.routingFeePercent.errors?.required">Percentage is required.</mat-error>
                  <mat-error *ngIf="inputFormGroup.controls.routingFeePercent.errors?.min">Percentage must be a positive number.</mat-error>
                </mat-form-field>
              </div>
              <div *ngIf="direction === LoopTypeEnum.LOOP_OUT" fxLayout="row wrap" fxFlex="100" fxLayoutAlign="start center" class="mt-1">  
                <mat-slide-toggle tabindex="4" color="primary" formControlName="fast" fxFlex="none">Fast</mat-slide-toggle>
                <mat-icon matTooltip="Swap immediately (Might end up paying a higher on-chain fee)" matTooltipPosition="above" class="info-icon" fxFlex="none">info_outline</mat-icon>
              </div>
              <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                <button mat-button color="primary" tabindex="5" type="button" (click)="onEstimateQuote()">Estimate Quote</button>
              </div>
            </form>
          </mat-step>
          <mat-step [stepControl]="quoteFormGroup" [editable]="flgEditable">
            <form fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="quoteFormGroup">
              <ng-template matStepLabel>{{quoteFormLabel}}</ng-template>
              <rtl-loop-quote [quote]="quote" [showPanel]="false" />
              <p *ngIf="inputFormGroup.controls.amount.value > localBalanceToCompare" fxFlex="100" class="color-warn mt-2" fxLayoutAlign="start center"><mat-icon class="mr-1 icon-small">close</mat-icon>Local balance amount is insufficient for swap.</p>
              <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                <button *ngIf="direction === LoopTypeEnum.LOOP_OUT" mat-button color="primary" tabindex="6" type="button" (click)="onValidateAmount()">Next</button>
                <button *ngIf="direction === LoopTypeEnum.LOOP_IN" mat-button color="primary" tabindex="7" type="button" (click)="onLoop()">Initiate {{loopDirectionCaption}}</button>
              </div>
            </form>
          </mat-step>
          <mat-step *ngIf="direction === LoopTypeEnum.LOOP_OUT" [stepControl]="addressFormGroup" [editable]="flgEditable">
            <form fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="addressFormGroup">
              <ng-template matStepLabel>{{addressFormLabel}}</ng-template>
              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch" class="mt-1">
                <mat-radio-group color="primary" name="addressType" formControlName="addressType" fxFlex="100" fxLayoutAlign="space-between stretch" (change)="onAddressTypeChange($event)">
                  <mat-radio-button fxFlex="48" tabindex="8" value="local">Node Local Address</mat-radio-button>
                  <mat-radio-button fxFlex="48" tabindex="9" value="external">External Address</mat-radio-button>
                </mat-radio-group>
                <mat-form-field fxLayout="column" fxFlex="100" class="mt-1">
                  <mat-label>Address</mat-label>
                  <input matInput tabindex="10" formControlName="address" [required]="addressFormGroup.controls.addressType.value === 'external'">
                  <mat-error *ngIf="addressFormGroup.controls.address.errors?.required">Address is required.</mat-error>
                </mat-form-field>
              </div>
              <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                <button mat-button color="primary" tabindex="11" type="button" (click)="onLoop()">Initiate {{loopDirectionCaption}}</button>
              </div>
            </form>
          </mat-step>
          <mat-step [stepControl]="statusFormGroup">
            <form fxLayout="column" fxLayoutAlign="start" fxLayoutAlign.gt-sm="space-between" class="my-1" [formGroup]="statusFormGroup">
              <ng-template matStepLabel>{{loopDirectionCaption}} Status</ng-template>
              <div fxLayout="row wrap" fxFlex="100" fxLayoutAlign="space-between stretch">
                <mat-expansion-panel class="flat-expansion-panel" fxFlex="100" [expanded]="!!loopStatus">
                  <mat-expansion-panel-header>
                    <mat-panel-title>
                      <span fxLayoutAlign="start center" fxFlex="100">{{(!loopStatus) ? ('Waiting for ' + loopDirectionCaption + ' request...') : (loopStatus.id_bytes) ? (loopDirectionCaption + ' request details') : (loopDirectionCaption + ' error details')}}<mat-icon *ngIf="loopStatus" class="ml-1 icon-small">{{(loopStatus && loopStatus?.id_bytes) ? 'check' : 'close'}}</mat-icon></span>
                    </mat-panel-title>
                  </mat-expansion-panel-header>
                  <div *ngIf="!loopStatus; else loopStatusBlock"></div>
                </mat-expansion-panel>
                <mat-progress-bar *ngIf="!loopStatus" fxFlex="100" color="primary" mode="indeterminate" />
              </div>
              <h4 *ngIf="loopStatus" fxLayoutAlign="start" class="font-bold-500 mt-2">{{(loopStatus && loopStatus.error) ? (loopDirectionCaption + ' failed.') : (loopStatus && loopStatus.id_bytes && channel) ? (loopDirectionCaption + ' request placed successfully. You can check the status of the request on the \'Loop\' menu.') : (loopDirectionCaption + ' request placed successfully.')}}</h4>
              <div class="mt-2" fxLayout="row" fxLayoutAlign="start center" fxFlex="100">
                <button *ngIf="loopStatus && loopStatus.id_bytes && channel" mat-button color="primary" tabindex="12" type="button" (click)="goToLoop()">Check Status</button>
                <button *ngIf="loopStatus && (loopStatus.error || !loopStatus.id_bytes)" mat-button color="primary" tabindex="13" type="button" (click)="onRestart()">Start Again</button>
              </div>
            </form>
          </mat-step>
        </mat-vertical-stepper>
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="end end">        
          <button mat-button color="primary" tabindex="14" type="button" default [mat-dialog-close]="false">Close</button>
        </div>
      </div>
    </mat-card-content>
  </div>
</div>
<ng-template #loopStatusBlock>
  <rtl-loop-status fxLayout="column" [loopStatus]="loopStatus" />
</ng-template>
<div *ngIf="flgShowInfo" fxLayout="column" fxFlex="100" fxLayoutAlign="start stretch" class="info-graphics-container" [@opacityAnimation]>
  <div fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
    <mat-card-header fxLayout="row" fxFlex="8" fxLayoutAlign="space-between center" class="modal-info-header">
      <div fxFlex="95" fxLayoutAlign="start start"><span class="page-title"></span></div>
      <div fxFlex="5" fxLayoutAlign="end center">
        <button tabindex="22" class="btn-close-x p-0" mat-button (click)="flgShowInfo=false;stepNumber=1;">X</button>
      </div>
    </mat-card-header>
    <mat-card-content fxLayout="column" fxFlex="70" fxLayoutAlign="space-between center" class="padding-gap-x-large">
      <rtl-loop-out-info-graphics *ngIf="direction === LoopTypeEnum.LOOP_OUT" fxFlex="100" [animationDirection]="animationDirection" [(stepNumber)]="stepNumber" />
      <rtl-loop-in-info-graphics *ngIf="direction === LoopTypeEnum.LOOP_IN" fxFlex="100" [animationDirection]="animationDirection" [(stepNumber)]="stepNumber" />
    </mat-card-content>
    <div fxLayout="row" fxFlex="10" fxLayoutAlign="center end" class="padding-gap-x-large padding-gap-bottom-large">
      <span *ngFor="let i of [1, 2, 3, 4, 5];" tabindex="21" fxLayoutAlign="center center" class="dots-stepper-block" (click) = "onStepChanged(i)">
        <p class="dot tiny-dot mr-0" [ngClass]="{'dot-primary': stepNumber === i, 'dot-primary-lighter': stepNumber !== i}"></p>
      </span>
    </div>
    <div fxLayout="row" fxFlex="10" fxLayoutAlign="end end" class="padding-gap-x-large padding-gap-bottom-large">
      <button *ngIf="stepNumber === 5" mat-button class="mr-1" color="primary" tabindex="15" type="button" (click)="onReadMore()">Read More</button>
      <button *ngIf="stepNumber === 5" mat-button class="mr-1" color="primary" tabindex="16" type="button" (click)="onStepChanged(4)">Back</button>
      <button *ngIf="stepNumber === 5" mat-button color="primary" tabindex="17" type="button" (click)="flgShowInfo=false;stepNumber=1;">Close</button>
      <button *ngIf="stepNumber < 5" mat-button class="mr-1" color="primary" tabindex="18" type="button" (click)="flgShowInfo=false;stepNumber=1;">Close</button>
      <button *ngIf="stepNumber > 1 && stepNumber < 5" mat-button class="mr-1" color="primary" tabindex="19" type="button" (click)="onStepChanged(stepNumber - 1)">Back</button>
      <button *ngIf="stepNumber < 5" mat-button color="primary" tabindex="20" type="button" (click)="onStepChanged(stepNumber + 1)">Next</button>
    </div>
  </div>
</div>
