{{define "title"}}
Connected Peers
{{end}}

{{define "top_css"}}
{{end}}

{{define "username"}}
{{ .username }}
{{end}}

{{define "page_title"}}
Connected Peers
{{end}}

{{define "page_content"}}
<script>
  function bytesToHumanReadable(temporal) {
    const units = [" ", " K", " M", " G", " T", " P", " E", " Z", " Y"]
    let pow = 0

    while (temporal > 1024) {
      temporal /= 1024
      pow ++
      if (pow == units.length-1) break
    }

    return parseFloat(temporal.toFixed(3)) + units[pow]+"Bytes"
  }
</script>
<section class="content">
    <div class="container-fluid">
        {{ if .error }}
        <div class="alert alert-warning" role="alert">{{.error}}</div>
        {{ end}}
        {{ range $dev := .devices }}
            <table class="table table-sm">
                <caption>List of connected peers for device with name {{ $dev.Name }} </caption>
              <thead>
                <tr>
                  <th scope="col">#</th>
                  <th scope="col">Name</th>
                  <th scope="col">Email</th>
                  <th scope="col">Public Key</th>
                  <th scope="col">ReceiveBytes</th>
                  <th scope="col">TransmitBytes</th>
                  <th scope="col">Connected (Approximation)</th>
                  <th scope="col">LastHandshakeTime</th>
                </tr>
              </thead>
              <tbody>
              {{ range $idx, $peer := $dev.Peers }}
              <tr {{ if $peer.Connected }} class="table-success" {{ end }}>
                <th scope="row">{{ $idx }}</th>
                <td>{{ $peer.Name }}</td>
                <td>{{ $peer.Email }}</td>
                <td>{{ $peer.PublicKey }}</td>
                <td title="{{ $peer.ReceivedBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.ReceivedBytes }}))</script></td>
                <td title="{{ $peer.TransmitBytes }} Bytes"><script>document.write(bytesToHumanReadable({{ $peer.TransmitBytes }}))</script></td>
                <td>{{ $peer.Connected }}</td>
                <td>{{ $peer.LastHandshakeTime }}</td>
               </tr>
              {{ end }}
              </tbody>
            </table>
        {{ end }}
    </div>
</section>
{{end}}
{{define "bottom_js"}}
{{end}}