mempool/frontend/src/app/lightning/nodes-per-country/nodes-per-country.component.html

<div class="container-xl full-height" style="min-height: 335px">
  <h1 i18n="lightning.nodes-in-country">
    <span>Lightning nodes in {{ country?.name }}</span>
    <span style="font-size: 50px; vertical-align:sub;"> {{ country?.flag }}</span>
  </h1>

  <div class="box">
    <div class="row" *ngIf="nodes$ | async as countryNodes">
      <div class="col-12 col-md-6">
        <table class="table table-borderless table-striped">
          <tbody>
            <tr>
              <td i18n="lightning.node-count">Nodes</td>
              <td>{{ countryNodes.nodes.length }}</td>
            </tr>
            <tr>
              <td i18n="lightning.liquidity">Liquidity</td>
              <td>
                <app-amount *ngIf="countryNodes.sumLiquidity > 100000000; else smallnode" [satoshis]="countryNodes.sumLiquidity" [digitsInfo]="'1.2-2'" [noFiat]="false"></app-amount>
                <ng-template #smallnode>
                  {{ countryNodes.sumLiquidity | amountShortener: 1 }}
                  <span class="sats" i18n="shared.sats">sats</span>
                </ng-template>
                <span class="d-none d-md-inline-block">&nbsp;</span>
                <span class="d-block d-md-none"></span>
                <app-fiat [value]="countryNodes.sumLiquidity" digitsInfo="1.0-0"></app-fiat>
              </td>
            </tr>
            <tr>
              <td i18n="lightning.channels">Channels</td>
              <td>{{ countryNodes.sumChannels }}</td>
            </tr>
            <tr>
              <td i18n="lightning.isp-count">ISP Count</td>
              <td>{{ countryNodes.ispCount }}</td>
            </tr>
            <tr>
              <td i18n="lightning.top-isp">Top ISP</td>
              <td class="text-truncate">
                <a class="d-block text-wrap" [routerLink]="['/lightning/nodes/isp' | relativeUrl, countryNodes.topIsp.id]">
                  {{ countryNodes.topIsp.name }} [ASN {{ countryNodes.topIsp.id }}]
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="col-12 col-md-6 p-3 p-md-0 pr-md-3">
        <div style="background-color: #181b2d">
          <app-nodes-map [widget]="true" [nodes]="countryNodes.nodes" type="country"></app-nodes-map>
        </div>
      </div>
    </div>
  </div>

  <div style="min-height: 295px">
    <table class="table table-borderless">
      
      <thead>
        <th class="alias text-left" i18n="lightning.alias">Alias</th>
        <th class="timestamp-first text-left" i18n="transaction.first-seen|Transaction first seen">First seen</th>
        <th class="timestamp-update text-left" i18n="lightning.last_update">Last update</th>
        <th class="capacity text-right" i18n="lightning.capacity">Capacity</th>
        <th class="channels text-right" i18n="lightning.channels">Channels</th>
        <th class="city text-right" i18n="lightning.location">Location</th>
      </thead>
      <tbody *ngIf="nodes$ | async as countryNodes; else skeleton">
        <tr *ngFor="let node of countryNodes.nodes; let i= index; trackBy: trackByPublicKey">
          <td class="alias text-left text-truncate">
            <a [routerLink]="['/lightning/node/' | relativeUrl, node.public_key]">{{ node.alias }}</a>
          </td>
          <td class="timestamp-first text-left">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.first_seen"></app-timestamp>
          </td>
          <td class="timestamp-update text-left">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updated_at"></app-timestamp>
          </td>
          <td class="capacity text-right">
            <app-amount *ngIf="node.capacity > 100000000; else smallchannel" [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
            <ng-template #smallchannel>
              {{ node.capacity | amountShortener: 1 }}
              <span class="sats" i18n="shared.sats">sats</span>
            </ng-template>
          </td>
          <td class="channels text-right">
            {{ node.channels }}
          </td>
          <td class="city text-right text-truncate">
            <app-geolocation [data]="node.geolocation" [type]="'list-country'"></app-geolocation>
          </td>
      </tbody>

      <ng-template #skeleton>
        <tbody>
          <tr *ngFor="let item of skeletonLines">
            <td class="alias text-left text-truncate">
              <span class="skeleton-loader"></span>
            </td>
            <td class="timestamp-first text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td class="timestamp-update text-left">
              <span class="skeleton-loader"></span>
            </td>
            <td class="capacity text-right">
              <span class="skeleton-loader"></span>
            </td>
            <td class="channels text-right">
              <span class="skeleton-loader"></span>
            </td>
            <td class="city text-right text-truncate">
              <span class="skeleton-loader"></span>
            </td>
          </tr>
        </tbody>
      </ng-template>

    </table>
  </div>

</div>