<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WWE</title>

    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" href="css/style.css" />
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Merriweather&display=swap");
    </style>
  </head>
  <body style="background-color: bisque">
    <div
      class="header"
      style="
        padding: 30px;
        text-align: center;
        background: red;
        color: white;
        font-size: 30px;
        font-family: 'Merriweather', serif;
      "
    >
      <h1>Watcha Wanna Eat?</h1>
    </div>

    <div
      class="container"
      style="
        position: relative;
        border: 5px solid yellow;
        border-radius: 8px;
        padding: 10px;
      "
    >
      <h2 style="font-family: 'Merriweather', serif">
        Enter your email to receive directions to your selected restaurant!
      </h2>
      <% for(var i = 0; i < restaurants.length; i++) {%>
      <h3>Chosen Restaurant: <%= restaurants[i].r_name %></h3>
      
        <br />

        <form action="/sendEmail/<%= restaurants[i].url_piece %>" method="post">
          Email: <input type="email" name="to" id="to"><br><br>
          <input type="submit" value="Submit"   style="
          background-color: yellow;
          color: black;
          text-align: center;
          font-size: 15px;
          padding: 20px;
          border-radius: 15px;
          border: 3px dashed red;
          font-family: 'Merriweather', serif;
        ">
        </form>
        <br />
        <%}%>
      <button
        class="button"
        style="
          background-color: yellow;
          color: black;
          text-align: center;
          font-size: 15px;
          padding: 20px;
          border-radius: 15px;
          border: 3px dashed red;
          font-family: 'Merriweather', serif;
        "
        onclick="window.location.href='/';"
      >
        Home
      </button>
    </div>

    <div
      class="footer"
      style="
        padding: 15px;
        text-align: center;
        background: red;
        color: white;
        font-size: 15px;
        position: absolute;
        bottom: 0px;
        width: 100%;
        font-family: 'Merriweather', serif;
      "
    >
      <h4>
        Links ||
        <a
          href="https://github.com/gavinraney/effective-pancake"
          target="_blank"
        >
          Repo</a
        >
        ||
        <a
          href="https://github.com/users/gavinraney/projects/1"
          target="_blank"
        >
          Backlog</a
        >
        || <a href="/aboutus" target="_blank"> About Us</a>
      </h4>
    </div>

    <script
      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"
      integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    ></script>
    <script src="/js/index.js"></script>
    <script src="https://smtpjs.com/v3/smtp.js"></script>
  </body>
</html>
