<%- include('../partials/header') %>
  <!--Nav Bar-->
  <section id="navigation">
    <nav class="navbar navbar navbar-dark bg-dark">
      <a class="navbar-brand" href=""><i class="fab fa-opera"></i>ptimizedHealth</a>
      <button class="navbar-toggler" type="button" >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="ml-auto navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="nutrition">Nutrition</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="sleep">Sleep</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="fitness">Fitness</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="profile">Profile</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="trending">Trending</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="about">About</a>
          </li>
          <li class="nav-item active">
            <a class="nav-link" href="/">Register!</a>
          </li>
        </ul>
      </div>
    </nav>
  </section>

    <section id="header">
      <div class="visionheader" style="background-image: url('../img/yoga.jpeg');" ;>
        <div class="container">
         

        <p class="visionstatement">OptimizedHealth strives to promote the health and well-being of individuals by allowing them to take care of themselves simply and effectively.</p>
      </div>
        <h5>Start Your Journy Towards Optimized Health</h5>

      </div>
    </section>

    <section id="createAccount">

      <div class="row">
        <div class=" card bg-dark text-center registrationform col-md">

          

          <form class="registrationInput" action="/" method = "POST">
            <div class="form-group">
              <h2>Create Your Account</h2>
             
              <label class="lead" for="exampleInputPassword1">Username</label>
              <input  class="form-control" id="createusername" name="createusername"placeholder="Username" style="width: 20rem;">
            </div>
            <div class="form-group ">
              <label class="lead" for="exampleInputEmail1">Email address</label>
              <input type="email" class="form-control" name = "createemail" id="createemail" aria-describedby="emailHelp" placeholder="Enter email" style="width: 20rem;">
            </div>
            <div class="form-group">
              <label class="lead" for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" name= "createpwd" id="createpwd" placeholder="Password" style="width: 20rem;">
            </div>
            <div class="form-group">
              <label class="lead" for="exampleInputPassword1">Confirm Password</label>
              <input  type="password" class="form-control" name= "confirmcreatepwd" id="confirmcreatepwd" placeholder="Confirm Password" style="width: 20rem;">
            </div>

            <button type="submit" id="accountsubmit-button" class="btn btn-primary btn-circle" onclick = "addUser()" disabled>Sign Up</button>

          </form>
          <ul>
           <%if (typeof errors != 'undefined') { %>
               <% errors.forEach(error=>{ %> 
                 <li style="color:red;font-size: 20px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"><%= error.message %></li>
               <%})%> <% }%>
            </ul>

        </div>
        <!--  -->
        <div class="card bg-dark text-center login col-md">
          <form action="/login" method="POST" class="registrationInput">
            <div class="form-group formlogin">
              

              <h2>Already a User?</h2>
            
              <label class="lead" for="exampleInputPassword1">Email</label>

              <input type="email" class="form-control" name="email" id="email" placeholder="Email" style="width: 20rem;">
            </div>
            <div class="form-group">
              <label class="lead" for="exampleInputPassword1">Password</label>
              <input type="password" class="form-control" id="password" name="password" placeholder="Password" style="width: 20rem;">
            </div>
            <button type="submit" value="Login" class="btn btn-primary btn-circle">Log In</button>
          </form>

          <ul>
            <% if(messages.success_msg){ %>
            <li style="color:aqua;font-size: 20px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"><%=messages.success_msg %></li>
          <%}%>
          </ul>
          <ul>
            <% if(messages.error){ %>
            <li style="color:red;font-size: 20px; font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif"><%=messages.error %></li>
          <%}%>
          </ul>
        </div>
      </div>


              
<%- include('../partials/footer') %>

