<!--
Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE
file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file
to You under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the
License. You may obtain a copy of the License at
 *
http://www.apache.org/licenses/LICENSE-2.0
 *
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on
an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the
specific language governing permissions and limitations under the License.
 -->
<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

    <!-- Boostrap add-on -->
    <link rel="stylesheet" href="bootstrap-nightfall.css">

    <!-- Fork with Github -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />

    <title>Apache Tuweni Network Crawler</title>
</head>
<body>
<a class="github-fork-ribbon" href="https://www.github.com/apache/incubator-tuweni" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 mr-0 px-3" href="#">Apache Tuweni Network Crawler</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-toggle="collapse"
            data-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <ul class="navbar-nav px-3">
<!--        <li class="nav-item text-nowrap">-->
<!--            <a class="nav-link" href="#">Sign out</a>-->
<!--        </li>-->
    </ul>
</nav>
<div class="container-fluid">
    <div class="row" id="app">

        <main role="main" class="col-md-12 ml-sm-auto col-lg-12 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Ethereum network crawler</h1>
                <p>This application runs a discovery process using Discv4 and DNS nodes, and contacts individually all nodes on a given Ethereum network to report their state.</p>
            </div>
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Recent peers</h1>
                <p>Showing our most recently contacted 10 peers.</p>
            </div>
            <div v-if="recent == null">
                <h1>⏳</h1>
            </div>
            <div v-else id="recent">
                <table>
                    <thead>
                     <tr>
                         <th>
                           Contacted
                         </th>
                         <th>
                             Public Key
                         </th>
                         <th>
                             Client ID
                         </th>
                         <th>
                             Capabilities
                         </th>
                     </tr>
                    </thead>
                    <tbody>
                      <tr v-for="item in recent">
                          <td>
                            {{ (new Date(item.createdAt)).toLocaleDateString() + " " + (new Date(item.createdAt)).toLocaleTimeString() }}
                          </td>
                          <td>
                              {{ item.nodeId.substr(0,8) }}...{{ item.nodeId.substr(-8,8) }}
                          </td>
                          <td>
                              {{ item.clientId }}
                          </td>
                          <td>
                              {{ item.capabilities }}
                          </td>
                      </tr>
                    </tbody>
                </table>
            </div>

                <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                    <h1 class="h2">Check my peer</h1>
                    <p>Enter your enode or public key to check if we know about your peer.</p>
                </div>
                <div class="w-50">
                    <form method="get" action="/node.html">
                        <div class="form-group">
                            <label for="publickey">Enode or public key</label>
                            <input type="text" class="form-control" id="publickey" name="publickey" placeholder="0xdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeefdeadbeef">
                        </div>
                        <button type="submit" class="btn btn-primary">Check</button>
                    </form>
                </div>

        </main>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="index.js"></script>
</body>
</html>