<div class="box preview-box" *ngIf="(node$ | async) as node">
  <app-preview-title>
    <span i18n="lightning.node">Lightning node</span>
  </app-preview-title>
  <div class="row d-flex justify-content-between full-width-row">
    <h1 class="title"></h1>
    <div class="title-wrapper">
      <h1 class="title">{{ node.alias }}</h1>
    </div>
    <div class="badges mb-2">
      <span class="badge rounded-pill badge-success" *ngFor="let socketType of socketTypes">{{ socketType }}</span>
    </div>
  </div>
  <div class="row">
    <div class="col-md table-col">
      <a class="subtitle" [routerLink]="['/lightning/node' | relativeUrl, node.public_key]">{{ node.public_key }}</a>
      <table class="table table-borderless table-striped">
        <tbody>
          <tr>
            <td i18n="lightning.active-capacity">Active capacity</td>
            <td>
              <app-amount [satoshis]="node.capacity" [noFiat]="true"></app-amount>
            </td>
          </tr>
          <tr>
            <td i18n="lightning.active-channels">Active channels</td>
            <td>
              {{ node.active_channel_count }}
            </td>
          </tr>
          <tr>
            <td i18n="lightning.avg-size">Average size</td>
            <td>
              <app-amount [satoshis]="node.avgCapacity" [noFiat]="true"></app-amount>
            </td>
          </tr>
          <tr *ngIf="node.city">
            <td i18n="lightning.location">Location</td>
            <td>
              <span>{{ node.city.en }}</span>
            </td>
          </tr>
          <tr *ngIf="node.country">
            <td i18n="country">Country</td>
            <td>
              {{ node.country.en }} {{ node.flag }}
            </td>
          </tr>
          <tr *ngIf="!node.city && !node.country">
            <td i18n="lightning.location">Location</td>
            <td>
              <span i18n="unknown">Unknown</span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md map-col">
      <app-nodes-channels-map *ngIf="!error" [style]="'nodepage'" [publicKey]="node.public_key" [fitContainer]="true" [placeholder]="true" [hasLocation]="!!node.as_number" [disableSpinner]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
    </div>
  </div>
</div>

<ng-template [ngIf]="error">
  <div class="text-center">
    <span i18n="error.general-loading-data">Error loading data.</span>
  </div>
</ng-template>
