<div class="tomahawk">
  <div class="links">
    <span>Monitoring</span>
    <a [routerLink]='"/nodes"'>Nodes</a>
  </div>

  <app-start [showLoadingIndicator]="true"></app-start>
  <app-footer [inline]="true"></app-footer>

  <ng-container *ngIf="(hosts$ | async) as hosts">
    <div class="status-panel">
      <table class="status-table table table-borderless table-striped">
        <tbody>
          <tr>
            <th class="rank"></th>
            <th class="flag"></th>
            <th class="host">Host</th>
            <th class="updated only-large">Updated</th>
            <th class="rtt only-small">RTT</th>
            <th class="rtt only-large">RTT</th>
            <th class="height">Height</th>
            <th *ngIf="isLiquidMainnet" class="peg">Peg</th>
            <th *ngIf="showHybridHash" class="hybrid hash">Hybrid</th>
            <th class="frontend hash">Front</th>
            <th class="backend hash">Back</th>
            <th class="electrs hash">Electrs</th>
            <th class="ssr hash">SSR</th>
            <th class="core">Core</th>
            <th class="os">OS</th>
          </tr>
          <tr *ngFor="let host of hosts; let i = index; trackBy: trackByFn">
            <td class="rank">{{ i + 1 }}</td>
            <td class="flag">{{ host.active ? '⭐️' : host.flag }}</td>
            <td class="host">{{ host.link }}</td>
            <td class="updated only-large">{{ getLastUpdateSeconds(host) }}</td>
            <td class="rtt only-small">{{ (host.rtt / 1000) | number : '1.1-1' }} {{ host.rtt == null ? '' : 's'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
            <td class="rtt only-large">{{ host.rtt | number : '1.0-0' }} {{ host.rtt == null ? '' : 'ms'}} {{ !host.checked ? '⏳' : (host.unreachable ? '🔥' : '✅') }}</td>
            <td class="height">{{ host.latestHeight }} {{ !host.checked ? '⏳' : (host.outOfSync ? '🚫' : (host.latestHeight && host.latestHeight < maxHeight ? '🟧' : '✅')) }}</td>
            <td class="peg" *ngIf="isLiquidMainnet">{{ formatPegRatio(host.liquidAudit?.pegRatio) }}</td>
            <ng-container *ngFor="let type of ['hybrid', 'frontend', 'backend', 'electrs', 'ssr', 'core', 'os']">
              <td *ngIf="showHybridHash || type !== 'hybrid'" class="{{type}}" [class.hash]="type !== 'core' && type !== 'os'" [class.version]="type === 'core' || type === 'os'" [style.background-color]="colors[host.host][type]">
                @if (type !== 'core' && type !== 'os' && host.hashes?.[type]) {
                  <a [style.color]="'white'" href="https://github.com/mempool/{{repoMap[type]}}/commit/{{ host.hashes[type] }}" target="_blank">{{ host.hashes[type].slice(0, 8) || '?' }}</a>
                } @else if (host.hashes?.[type]) {
                  <span [style.color]="'white'" ngbTooltip="{{ host.hashes[type] }}" placement="top">{{ shortenVersion(host.hashes[type]) || '?' }}</span>
                } @else {
                  <span>?</span>
                }
              </td>
            </ng-container>
          </tr>
        </tbody>
      </table>
    </div>
  </ng-container>
</div>
