<div fxLayout="column">
  <div fxLayout="row" fxFlex="100" fxLayoutAlign="start start" class="padding-gap">
    <mat-card-content fxLayout="column" fxFlex="100" fxLayoutAlign="space-between stretch">
      <form #form="ngForm" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start space-between" class="w-100">
        <div fxFlex="100" fxLayoutAlign="start end">
          <mat-radio-group color="primary" tabindex="1" name="lookupField">
            <mat-radio-button checked class="mr-4" [value]="0">Node</mat-radio-button>
          </mat-radio-group>
        </div>
        <mat-form-field fxLayout="column" fxFlex="100" fxLayoutAlign="start end" [ngClass]="{'mt-1': true, 'mt-2': screenSize === screenSizeEnum.XS || screenSize === screenSizeEnum.SM}">
          <mat-label>{{lookupFields[selectedFieldId]?.placeholder || 'Lookup Key'}}</mat-label>
          <input #key matInput name="lookupKey" tabindex="2" required [formControl]="lookupKeyCtrl">
          <mat-error *ngIf="lookupKeyCtrl.errors?.required">{{lookupFields[selectedFieldId]?.placeholder}} is required.</mat-error>
          <mat-error *ngIf="lookupKeyCtrl.errors?.invalid">Invalid {{lookupFields[selectedFieldId]?.placeholder}}.</mat-error>
        </mat-form-field>
        <div fxLayout="row" fxFlex="100" class="mt-1">
          <button class="mr-1" mat-stroked-button color="primary" tabindex="3" type="button" (click)="resetData()">Clear</button>
          <button mat-flat-button color="primary" tabindex="4" type="submit" (click)="onLookup()">Lookup</button>
        </div>
      </form>     
      <div *ngIf="flgSetLookupValue" fxFlex="100" fxLayout="column" fxLayout.gt-sm="row wrap" fxLayoutAlign.gt-sm="space-between center" fxLayoutAlign="start stretch" class="w-100 mt-2">
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center">
          <span class="page-title font-bold-500">{{lookupFields[selectedFieldId].name}} Details</span>
        </div>
        <div fxLayout="row" fxFlex="100" fxLayoutAlign="start center" [ngSwitch]="selectedFieldId">
          <span *ngSwitchCase="0" fxFlex="100"><div *ngIf="nodeLookupValue.nodeId; else errorBlock"><rtl-ecl-node-lookup [lookupResult]="nodeLookupValue"></rtl-ecl-node-lookup></div></span>
          <!-- <span fxFlex="100" *ngSwitchCase="1"><div *ngIf="channelLookupValue.length>0; else errorBlock"><rtl-cln-channel-lookup [lookupResult]="channelLookupValue"></rtl-cln-channel-lookup></div></span> -->
          <span *ngSwitchDefault> fxFlex="100"<h3>Error! Unable to find details!</h3></span>
        </div>
      </div>      
    </mat-card-content>
  </div>
</div>
<ng-template #errorBlock>
  <h3>Error! Unable to find details!</h3>
</ng-template>