< div fxLayout = "column" fxLayout . gt-sm = "row" fxLayoutAlign = "space-between stretch" >
< div fxFlex = "100" class = "padding-gap-large pl-3" >
< mat-card-header fxLayout = "row" fxLayoutAlign = "space-between center" class = "modal-info-header" >
< div fxFlex = "95" fxLayoutAlign = "start start" >
< span class = "page-title" > Payment Information< / span >
< / div >
< button tabindex = "3" fxFlex = "5" fxLayoutAlign = "center" class = "btn-close-x p-0" ( click ) = " onClose ( ) " mat-button > X< / button >
< / mat-card-header >
< mat-card-content perfectScrollbar class = "mt-5px mb-0 pr-2 h-40" # scrollContainer >
< div fxLayout = "column" >
< div fxLayout = "row" >
< div fxFlex = "30" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Amount (Sats)< / h4 >
< span class = "foreground-secondary-text" > {{payment.recipientAmount | number}}< / span >
< / div >
< div fxFlex = "70" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Date/Time< / h4 >
< span class = "foreground-secondary-text" > {{payment.firstPartTimestampStr}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > ID< / h4 >
< span class = "foreground-secondary-text" > {{payment.id}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Payment Hash< / h4 >
< span class = "foreground-secondary-text" > {{payment.paymentHash}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Payment Preimage< / h4 >
< span class = "foreground-secondary-text" > {{payment.paymentPreimage}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Recipient Node< / h4 >
< span class = "foreground-secondary-text" > {{payment.recipientNodeAlias}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" * ngIf = "description" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Description< / h4 >
< span class = "foreground-secondary-text" > {{description}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" * ngIf = "description" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< mat-accordion >
< mat-expansion-panel [ expanded ] = " expansionOpen " ( opened ) = " onExpansionOpen ( true ) " ( closed ) = " onExpansionOpen ( false ) " class = "flat-expansion-panel my-1" * ngFor = "let part of payment.parts; index as i" >
< mat-expansion-panel-header >
< mat-panel-title >
< h4 fxFlex = "30" fxLayoutAlign = "start" class = "font-bold-500" > Part {{i + 1}}< / h4 >
< h4 fxFlex = "70" fxLayoutAlign = "start" class = "font-bold-500" > {{part.amount | number}} (Sats)< / h4 >
< / mat-panel-title >
< / mat-expansion-panel-header >
< div fxLayout = "column" >
< div fxLayout = "row" >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Fees (mSats)< / h4 >
< span class = "foreground-secondary-text" > {{part.feesPaid | number}}< / span >
< / div >
< div fxFlex = "50" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > Date/Time< / h4 >
< span class = "foreground-secondary-text" > {{part.timestampStr}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > ID< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{part.id}}< / span >
< / div >
< / div >
< mat-divider class = "w-100 my-1" > < / mat-divider >
< div fxLayout = "row" >
< div fxFlex = "100" >
< h4 fxLayoutAlign = "start" class = "font-bold-500" > To Channel< / h4 >
< span class = "overflow-wrap foreground-secondary-text" > {{part.toChannelAlias}}< / span >
< / div >
< / div >
< / div >
< / mat-expansion-panel >
< / mat-accordion >
< / div >
< / div >
< / div >
< / mat-card-content >
< div fxLayout = "row" fxLayoutAlign = "start end" class = "btn-sticky-container" >
< button mat-mini-fab aria-label = "Scroll Down" fxLayoutAlign = "center center" ( click ) = " onScrollDown ( ) " >
< mat-icon fxLayoutAlign = "center center" > arrow_downward< / mat-icon >
< / button >
< / div >
< div fxLayout = "row" fxLayoutAlign = "end center" class = "mt-1" >
< button class = "mr-1" fxLayoutAlign = "center center" tabindex = "1" mat-stroked-button color = "primary" type = "button" [ mat-dialog-close ] = " false " default > OK< / button >
< / div >
< / div >
< / div >