<table>
  <thead>
    <th>Name</th>
    <th><span class="pl-5">Operator</span></th>
    <th>Used As</th>
    <th *ngIf="!!lanes">Latency</th>
    <th *ngIf="!!lanes">Capacity</th>
    <th>IPv4</th>
    <th>IPv6</th>
    <th *ngIf="allowClick"></th>
  </thead>
  <tbody>
    <tr class="border-l-2 border-transparent" [ngClass]="{'hover:border-l-yellow-300': allowHover}"
      *ngFor="let pin of pins; trackBy: trackPin" (mouseenter)="pinHover.next(pin.pin.ID)"
      (mouseleave)="pinHover.next(null)">
      <td>
        <spn-node-icon [bySafing]="pin.pin.VerifiedOwner === 'Safing'" [isExit]="pin.isExit" [isActive]="pin.isActive">
        </spn-node-icon>
        {{ pin.pin.Name }}
      </td>

      <td>
        <div class="flex flex-row items-center gap-1 text-secondary">
          <svg sfng-tooltip="Verified operator: {{pin.pin.VerifiedOwner}}" *ngIf="!!pin.pin.VerifiedOwner"
            xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
            class="inline-block w-4 h-4 -mt-1 text-green-300">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M9 12.75L11.25 15 15 9.75M21 12c0 1.268-.63 2.39-1.593 3.068a3.745 3.745 0 01-1.043 3.296 3.745 3.745 0 01-3.296 1.043A3.745 3.745 0 0112 21c-1.268 0-2.39-.63-3.068-1.593a3.746 3.746 0 01-3.296-1.043 3.745 3.745 0 01-1.043-3.296A3.745 3.745 0 013 12c0-1.268.63-2.39 1.593-3.068a3.745 3.745 0 011.043-3.296 3.746 3.746 0 013.296-1.043A3.746 3.746 0 0112 3c1.268 0 2.39.63 3.068 1.593a3.746 3.746 0 013.296 1.043 3.746 3.746 0 011.043 3.296A3.745 3.745 0 0121 12z" />
          </svg>
          <span [ngClass]="{'pl-5': !pin.pin.VerifiedOwner}">
            {{ pin.pin.VerifiedOwner || 'Community' }}
          </span>
        </div>
      </td>

      <td>
        <div class="flex flex-row items-center gap-2">

          <!-- Home Node Icon -->
          <svg sfng-tooltip="Home Node" *ngIf="pin.isHome" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue">
            <path stroke-linecap="round" stroke-linejoin="round" d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z" />
          </svg>


          <!-- Exit Node Icon -->
          <svg sfng-tooltip="Exit Node" *ngIf="pin.isExit" xmlns="http://www.w3.org/2000/svg" fill="none"
            viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M12 16.5V9.75m0 0l3 3m-3-3l-3 3M6.75 19.5a4.5 4.5 0 01-1.41-8.775 5.25 5.25 0 0110.233-2.33 3 3 0 013.758 3.848A3.752 3.752 0 0118 19.5H6.75z" />
          </svg>

          <!-- Transit Node Icon -->
          <svg sfng-tooltip="Transit Node" *ngIf="pin.isTransit && !pin.isHome" xmlns="http://www.w3.org/2000/svg"
            fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 text-blue">
            <path stroke-linecap="round" stroke-linejoin="round"
              d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
          </svg>
        </div>
      </td>

      <ng-container *ngIf="!!lanes && lanes.get(pin.pin.ID) as val">
        <td>
          {{ val.Latency / 1000 / 1000 | number:'1.0-2' }} ms
        </td>
        <td>
          {{ val.Capacity / 1000 / 1000 | number:'1.0-2' }} Mbit/s
        </td>
      </ng-container>

      <td>{{ pin.pin.EntityV4?.IP || 'N/A' }}</td>
      <td>{{ pin.pin.EntityV6?.IP || 'N/A' }}</td>
      <td *ngIf="allowClick">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-4 h-4 cursor-pointer text-secondary hover:text-primary" (click)="pinClick.next(pin.pin.ID)">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
        </svg>
      </td>
    </tr>
  </tbody>
</table>
