<div fxLayout="column" fxLayout.gt-sm="row" fxLayoutAlign="space-between stretch">
  <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">Payment Information</span>
      </div>
      <button tabindex="3" fxFlex="5" fxLayoutAlign="center center" class="btn-close-x p-0" mat-button (click)="onClose()">X</button>
    </mat-card-header>
    <mat-card-content #scrollContainer class="h-40 padding-gap-x-large" [perfectScrollbar]>
      <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.firstPartTimestamp) | date:'dd/MMM/y HH:mm'}}</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 *ngIf="description" fxLayout="row">
          <div fxFlex="100">
            <h4 fxLayoutAlign="start" class="font-bold-500">Description</h4>
            <span class="foreground-secondary-text">{{description}}</span>
          </div>
        </div>
        <mat-divider *ngIf="description" class="w-100 my-1"></mat-divider>   
        <div fxLayout="row">
          <div fxFlex="100">
            <mat-accordion>
              <mat-expansion-panel *ngFor="let part of payment.parts; index as i" class="flat-expansion-panel my-1" [expanded]="expansionOpen" (opened)="onExpansionOpen(true)" (closed)="onExpansionOpen(false)">
                <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.timestamp) | date:'dd/MMM/y HH:mm'}}</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 padding-gap-x-large">
      <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="padding-gap-x-large padding-gap-bottom-large">
      <button class="mr-1" fxLayoutAlign="center center" tabindex="1" mat-button color="primary" type="button" default [mat-dialog-close]="false">OK</button>
    </div>
  </div>
</div>
