<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">

    <!-- Font Awesome -->
    <script src="https://kit.fontawesome.com/f82df14a80.js" crossorigin="anonymous"></script>

    <!-- Bootstrap 5.2.0-->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

    <link rel="stylesheet" href="/css/general-styles.css" />
    <link rel="stylesheet" href="/css/home-styles.css" />
    <title>Sign-Up</title>
  </head>
  <body class="background-gradient">
<!--**********  NAVBAR SECTION ***********-->
      <%- include('partials/navbar') %>

<!--**********  MAIN SECTION ***********-->
<section class="container-fluid height d-flex justify-content-center align-items-center py-3">
<div class="login-inner border mt-5">
  <div class="p-4 btn-gradient">
    <h1 class="text-center">Get Started For Free!</h1>
  </div>

  <form class="login-inner-form py-4 px-5" action="/users/register" method="POST">
    <div class="mb-4">
      <label for="name" class="form-label text-uppercase">Name</label>
      <input type="text" class="form-control" name="user[name]" id="name" aria-describedby="emailHelp">
    </div>
    <div class="mb-4">
      <label for="email" class="form-label text-uppercase">Email address</label>
      <input type="email" class="form-control" name="user[email]" id="email" aria-describedby="emailHelp">
      <div id="emailHelp" class="form-text pt-1">We'll never share your email with anyone else.</div>
    </div>
    <div class="mb-4">
      <label for="password" class="form-label text-uppercase">Password</label>
      <input type="password" class="form-control" name="user[password]" id="password">
    </div>
    <div class="mb-4">
      <label for="company" class="form-label text-uppercase">Company Name</label>
      <input type="text" class="form-control" name="user[company]" id="company">
    </div>
    <div class="mb-4">
      <label for="address" class="form-label text-uppercase">Address</label>
      <input type="text" class="form-control" name="user[address]" id="address">
    </div>
    <div class="mb-4">
      <label for="tel" class="form-label text-uppercase">Phone Number</label>
      <input type="phone" class="form-control" name="user[tel]" id="tel">
    </div>
    <div class="mb-4">
      <label for="website" class="form-label text-uppercase">Website URL (optional)</label>
      <input type="url" class="form-control" name="user[website]" id="website">
    </div>
    <div class="mb-5">
      <label for="logo" class="form-label text-uppercase">Logo (optional)</label>
      <input type="file" class="form-control" name="user[logo]" id="logo">
    </div>
    <button type="submit" class="submitBtn btn-gradient py-2">Register</button>
  </form>
</div>

</section>

<!--**********  FOOTER SECTION *********  -->
<%- include('partials/footer') %>
<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
  crossorigin="anonymous"
></script>
  </body>
</html>
