<!DOCTYPE html>
<html lang="en">
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, shrink-to-fit=no"
      />
      <meta name="description" content="" />
      <title>World Wines</title>

      <link
        rel="canonical"
        href="https://getbootstrap.com/docs/4.5/examples/album/"
      />

      <!-- Bootstrap core CSS -->
      <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z"
        crossorigin="anonymous"
      />

      <link href="css/album.css" rel="stylesheet" />
    </head>
    <body>
      <%- include('common/header'); -%>

      <div class="container">
        <h1 class="text-center">Join</h1>
        <div class="row justify-content-md-center">
          <div class="col-">
            <form method="POST" action="/join">
              <div class="form-group">
                <label for="name">Email</label>
                <input
                  type="email"
                  class="form-control"
                  id="email"
                  name="email"
                  placeholder="Enter Email"
                />

                <% if (errors['email']) { %>
                <p style="color: red"><%= errors['email'].message %></p>
                <% } %>
              </div>
              <div class="form-group">
                <label for="password">Password</label>
                <input type="password" class="form-control" name="password" />
                <% if (errors['password']) { %>
                <p style="color: red"><%= errors['password'].message %></p>
                <% } %>
              </div>

              <button type="submit" class="btn btn-primary">Submit</button>
            </form>
          </div>
        </div>
      </div>
      <%- include('common/footer'); -%>
    </body>
  </html>
</html>
