<div class="box preview-box" *ngIf="(channel$ | async) as channel">
  <app-preview-title>
    <span i18n="lightning.channel">lightning channel</span>
  </app-preview-title>
  <div class="row d-flex justify-content-between full-width-row">
    <div class="title-wrapper">
      <h1 class="title">{{ channel.short_id }}</h1>
    </div>
    <div class="badges mb-2">
      <span class="badge rounded-pill badge-secondary" *ngIf="channel.status === 0" i18n="status.inactive">Inactive</span>
      <span class="badge rounded-pill badge-success" *ngIf="channel.status === 1" i18n="status.active">Active</span>
      <span class="badge rounded-pill badge-danger" *ngIf="channel.status === 2" i18n="status.closed">Closed</span>

      <app-closing-type [type]="channel.closing_reason" *ngIf="channel.status === 2"></app-closing-type>
    </div>
  </div>
  <div class="row">
    <div class="col-md table-col">
      <a class="subtitle" [routerLink]="['/lightning/channel' | relativeUrl, channel.id]">{{ channel.id }}</a>
      <table class="table table-borderless table-striped">
        <tbody>
          <tr>
            <td i18n="lightning.created">Created</td>
            <td>{{ channel.created | date:'yyyy-MM-dd HH:mm' }}</td>
          </tr>
          <tr>
            <td i18n="lightning.capacity">Capacity</td>
            <td><app-amount [satoshis]="channel.capacity" [noFiat]="true"></app-amount></td>
          </tr>
          <tr>
            <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
            <td>
              <div class="dual-cell">
                <span>{{ channel.node_left.fee_rate }} <span class="symbol" i18n="lightning.ppm">ppm</span></span>
                <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true"></fa-icon>
                <span>{{ channel.node_right.fee_rate }} <span class="symbol" i18n="lightning.ppm">ppm</span></span>
              </div>
            </td>
          </tr>
          <tr>
            <td i18n="channel.base-fee">Base fee</td>
            <td>
              <div class="dual-cell">
                <app-sats [satoshis]="channel.node_left.base_fee_mtokens / 1000" digitsInfo="1.0-2"></app-sats>
                <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true"></fa-icon>
                <app-sats [satoshis]="channel.node_right.base_fee_mtokens / 1000" digitsInfo="1.0-2"></app-sats>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="col-md map-col">
      <app-nodes-channels-map *ngIf="!error" [style]="'channelpage'" [channel]="channelGeo" [fitContainer]="true" [placeholder]="true" [disableSpinner]="true" (readyEvent)="onMapReady()"></app-nodes-channels-map>
    </div>
  </div>
  <div class="row d-flex justify-content-between full-width-row nodes">
    <span class="node left">
      {{ channel.node_left.alias || '?' }}
    </span>
    <fa-icon class="between-arrow" [icon]="['fas', 'arrow-right-arrow-left']" [fixedWidth]="true" title="channel between"></fa-icon>
    <span class="node right">
      {{ channel.node_right.alias || '?' }}
    </span>
  </div>
</div>

<ng-template [ngIf]="error">
  <app-http-error [error]="error">
    <span i18n="error.general-loading-data">Error loading data.</span>
  </app-http-error>
</ng-template>
