<div [class]="!widget ? 'container-xl full-height' : ''">
  <h1 *ngIf="!widget" class="float-start">
    <span i18n="lightning.top-100-oldest-nodes">Top 100 oldest lightning nodes</span>
  </h1>

  <div [class]="widget ? 'widget' : 'full'">
    <table class="table table-borderless">
      <thead>
        <th class="rank"></th>
        <th class="alias text-start" i18n="nodes.alias">Alias</th>
        <th  class="timestamp-first text-end" i18n="transaction.first-seen|Transaction first seen">First seen</th>
        <th *ngIf="!widget" class="capacity text-end" i18n="node.liquidity">Liquidity</th>
        <th *ngIf="!widget" class="channels text-end" i18n="lightning.channels">Channels</th>
        <th *ngIf="!widget" class="timestamp-update text-start" i18n="lightning.last_update">Last update</th>
        <th *ngIf="!widget" class="location text-end" i18n="lightning.location">Location</th>
      </thead>
      <tbody *ngIf="oldestNodes$ | async as nodes; else skeleton">
        <tr *ngFor="let node of nodes; let i = index;">
          <td class="rank text-start">
            {{ i + 1 }}
          </td>
          <td class="alias text-start">
            <a [routerLink]="['/lightning/node' | relativeUrl, node.publicKey]">{{ node.alias }}</a>
          </td>
          <td class="timestamp-first text-end">
            &lrm;{{ node.firstSeen * 1000 | date: 'yyyy-MM-dd' }}
          </td>
          <td *ngIf="!widget" class="capacity text-end">
            <app-amount [satoshis]="node.capacity" [digitsInfo]="'1.2-2'" [noFiat]="true"></app-amount>
          </td>
          <td *ngIf="!widget" class="channels text-end">
            {{ node.channels | number }}
          </td>
          <td *ngIf="!widget" class="timestamp-update text-start">
            <app-timestamp [customFormat]="'yyyy-MM-dd'" [unixTime]="node.updatedAt"></app-timestamp>
          </td>
          <td *ngIf="!widget" class="location text-end text-truncate">
            <app-geolocation [data]="node.geolocation" [type]="'list-isp'"></app-geolocation>
          </td>
        </tr>
      </tbody>
      <ng-template #skeleton>
        <tbody>
          <tr *ngFor="let item of skeletonRows">
            <td class="rank text-start">
              <span class="skeleton-loader"></span>
            </td>
            <td class="alias text-start">
              <span class="skeleton-loader"></span>
            </td>
            <td class="capacity text-end">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="channels text-end">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="timestamp-first text-start">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="timestamp-update text-start">
              <span class="skeleton-loader"></span>
            </td>
            <td *ngIf="!widget" class="location text-end text-truncate">
              <span class="skeleton-loader"></span>
            </td>
          </tr>
        </tbody>
      </ng-template>
    </table>
  </div>
</div>