<div class="mb-2 box-top">
  <div class="box-left text-truncate">
    <h3 class="mb-0 text-truncate">{{ channel.alias || '?' }}</h3>
    <app-truncate [text]="channel.public_key" [lastChars]="6" [link]="['/lightning/node' | relativeUrl, channel.public_key]">
      <app-clipboard [text]="channel.public_key"></app-clipboard>
    </app-truncate>
  </div>
  <div class="box-right">
    <div class="second-line"><ng-container *ngTemplateOutlet="xChannels; context: {$implicit: channel.channels }"></ng-container></div>
    <div class="second-line"><app-amount [satoshis]="channel.capacity" digitsInfo="1.2-2" [noFiat]="true"></app-amount></div>
  </div>
</div>

<div class="box">
  <table class="table table-borderless table-striped">
    <tbody>
      <tr>
        <td i18n="transaction.fee-rate|Transaction fee rate">Fee rate</td>
        <td>
          <span class="d-inline-block d-md-none">
            {{ channel.fee_rate !== null ? (channel.fee_rate | amountShortener : 2 : undefined : true) : '-' }} <span class="symbol">ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | amountShortener : 2 : undefined : true) + '%)' : '' }}</span>
          </span>
          <span class="d-none d-md-inline-block">
            {{ channel.fee_rate !== null ? (channel.fee_rate | number) : '-' }} <span class="symbol">ppm {{ channel.fee_rate !== null ? '(' + (channel.fee_rate / 10000 | number) + '%)' : '' }}</span>
          </span>
        </td>
      </tr>
      <tr>
        <td i18n="lightning.base-fee">Base fee</td>
        <td class="base-fee">
          <span class="d-flex justify-content-between align-items-center">
            <span>
              <span *ngIf="channel.base_fee_mtokens !== null">
                {{ channel.base_fee_mtokens | amountShortener : 0 }}
                <span class="symbol" i18n="shared.m-sats">mSats</span>
              </span>
              <span *ngIf="channel.base_fee_mtokens === null">
                -
              </span>
            </span>
            <ng-template [ngIf]="channel.base_fee_mtokens !== null">
              <span class="badge badge-success" *ngIf="channel.base_fee_mtokens === 0; else nonZeroBaseFee"
                i18n-ngbTooltip="lightning.zero-base-fee-tooltip"
                ngbTooltip="This channel supports zero base fee routing"
                placement="bottom" i18n="lightning.zero-base-fee">Zero base fee</span>
            </ng-template>
            <ng-template #nonZeroBaseFee>
              <span class="badge badge-danger"
                i18n-ngbTooltip="lightning.non-zero-base-fee-tooltip"
                ngbTooltip="This channel does not support zero base fee routing"
                placement="bottom" i18n="lightning.non-zero-base-fee">Non-zero base fee</span>
            </ng-template>
          </span>
        </td>
      </tr>
      <tr>
        <td i18n="lightning.min-htlc">Min HTLC</td>
        <td>
          <app-sats [valueOverride]="channel.min_htlc_mtokens === null ? '- ' : undefined" [satoshis]="channel.min_htlc_mtokens / 1000"></app-sats>
        </td>
      </tr>
      <tr>
        <td i18n="lightning.max-htlc">Max HTLC</td>
        <td>
          <app-sats [valueOverride]="channel.max_htlc_mtokens === null ? '- ' : undefined" [satoshis]="channel.max_htlc_mtokens / 1000"></app-sats>
        </td>
      </tr>
      <tr>
        <td i18n="lightning.timelock-delta">Timelock delta</td>
        <td>
          <ng-container *ngTemplateOutlet="blocksPlural; context: {$implicit: channel.cltv_delta ?? '-' }"></ng-container>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<ng-template #blocksPlural let-i i18n="shared.blocks">{{ i }} <span class="shared-block">blocks</span></ng-template>
<ng-template #xChannels let-i i18n="lightning.x-channels">{{ i }} channels</ng-template>
