<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>abtmtr.link</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="stylesheet" href="/assets/style.css" />
</head>

<body>
  <div class="fakemain">
    <%- include("../../components/header.ejs") %>
  </div>
  <main>
    <p class="tagline">What are other sites saying about abtmtr.link?</p>
    <section>
      <form action="/blurbs/send" method="get">
        <p>
          <label for="siteName">Website URL:</label>
          <input type="url" name="site" id="siteName">
        </p>
        <p>
          <label for="blurbText">Blurb:</label>
          <input type="text" name="text" id="blurbText" maxlength="140" minlength="1">
        </p>
        <p>
          <input type="submit" value="Submit Blurb">
        </p>
        <p style="opacity: 0.5;">by clicking this button and successfully submitting a blurb, you agree that your input may be displayed on this site and stored on abtmtr.link servers, even if the blurb is not verified. unverified blurbs will be marked for removal one day after creation.</p>
      </form>
      <ul>
      <% data.forEach((blurb) => { %>
        <li class="blurb" id="<%= blurb.id %>"><a href="<%= blurb.site %>" target="_blank"><%= new URL(blurb.site).host %></a>: <%= blurb.blurb %> <a class="removePopup" href="/blurbs/check?id=<%= blurb.id %>">remove</a></li>
      <% }) %>
      </ul>
    </section>
    <style>
      .blurb .removePopup {
        visibility: hidden;
        opacity: 0.5;
        color: red;
      }
      .blurb:hover .removePopup {
        visibility: visible;
      }
    </style>
  </main>
  <%- include("../../components/footer.ejs") %>
  <script src="/assets/script.js"></script>
</body>

</html>