<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>IPPP!</title>

    <meta property="og:title" content="IPv4 Lookup" />
    <meta property="og:site_name" content="IPPP!" />
    <meta property="og:url" content="https://ippp.gq" />
    <meta
      property="og:description"
      content="Get information for an IP address."
    />
    <meta property="og:type" content="website" />
    <meta property="og:image" content="favicon/android-chrome-512x512.png" />
    <meta
      property="og:image:secure_url"
      content="favicon/android-chrome-512x512.png"
    />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="placeholder image" />
    <meta property="og:image:type" content="image/jpeg" />
    <meta name="twitter:card" content="summary_large_image" />

    <link
      rel="apple-touch-icon"
      sizes="180x180"
      href="favicon/apple-touch-icon.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="favicon/favicon-32x32.png"
    />
    <link
      rel="icon"
      type="image/png"
      sizes="16x16"
      href="favicon/favicon-16x16.png"
    />
    <link rel="manifest" href="favicon/site.webmanifest" />
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/index.js"></script>
  </head>
  <body>
    <main>
      <img src="img/ippp logo.png" alt="IPPP!" />
      <form id="form">
        <label for="input">Get info for an IP address:</label>
        <br /><br />
        <input id="input" placeholder="IP address"/>
        <input type="submit" value="Search!">
        <br /><br /><br />
      </form>
      <% if (!success) { %>
      <div class="error">Invalid IP Address!</div>
      <% } else { %>
      <ul>
        <li><strong>IP Address:</strong> <%- ip %></li>
        <li><strong>Address:</strong> <%- name %></li>
        <li><strong>Country:</strong> <%- country %></li>
        <li><strong>State/Region:</strong> <%- region %></li>
        <li><strong>City:</strong> <%- city %></li>
        <li><strong>ZIP Code:</strong> <%- postal_code %></li>
        <li><strong>Time Zone:</strong> <%- timezone %></li>
        <li><strong>Organization:</strong> <%- org %></li>
        <li><strong>ASN:</strong> <%- asn %></li>
      </ul>
      <% } %>
    </main>
    <script type="text/javascript">
      document.querySelector("#form").onsubmit = (e) => {
        e.preventDefault();
        window.location.replace(`/${document.querySelector("#input").value}`);
      }
    </script>
  </body>
</html>
