<%-include("header.ejs")%>
    <body class="bg-body-tertiary">
        <section class="signin d-flex flex-column align-items-center justify-content-center">
    <div class="container">
        <div class="text-center">
          <img class="d-block mx-auto" src="ns.png" alt="" width="72" height="57">
          <h2>Sign In</h2>
        </div>
          </div>
          <form class="d-flex flex-column align-items-center justify-content-center"  action="/signup" method="POST">
          <div class="col-md-7 col-lg-8">
              <div class="row g-3">
                <div class="col-sm-6">
                  <label for="firstName" class="form-label">First name</label>
                  <input type="text" class="form-control" name="firstname" placeholder="May" id="firstname">
                  <div class="invalid-feedback">
                    Valid first name is required.
                  </div>
                </div>
    
                <div class="col-sm-6">
                  <label for="lastName" class="form-label">Last name</label>
                  <input type="text" class="form-control" name="lastname" placeholder="Smith" id="lastname">
                  <div class="invalid-feedback">
                    Valid last name is required.
                  </div>
                </div>
    
                <div class="col-12">
                  <label for="username" class="form-label">Username</label>
                  <div class="input-group has-validation">
                    <span class="input-group-text">@</span>
                    <input type="text" class="form-control" name="username">
                  <div class="invalid-feedback">
                      A username is required.
                    </div>
                  </div>
                </div>
                <div class="col-12">
                    <label for="password" class="form-label">Password</label>
                    <input type="text" class="form-control" name="pass" id="password">
                    <div class="invalid-feedback">
                      Please enter a valid email address for logging onto our Website.
                    </div>
                  </div>
                <div class="col-12">
                  <label for="email" class="form-label">Email</label>
                  <input type="email" class="form-control" id="email" placeholder="you@example.com" name="email">
                  <div class="invalid-feedback">
                    Please enter a valid email address for logging onto our Website.
                  </div>
                </div>
                <div class="col-md-8 border">
                  <label for="state" class="form-label">Type of user</label>
                  <select class="form-select" id="state" name="user" required="" >
                    <option value="">Choose...</option>
                    <option value="renter">I am here to find a room to rent</option>
                    <option value="owner">I am here to rent</option>
                  </select>
                  <div class="invalid-feedback">
                    Please provide a valid type.
                  </div>
                </div>
                <div class="form-check d-flex justify-content-center my-3">
                  <input class="form-check-input mx-2" type="checkbox" value="I am a Woman" id="flexCheckDefault" name="check">
                  <label class="form-check-label" for="flexCheckDefault">
                    I am a Woman
                  </label>
                </div>
              </div>
            </div>
            <button class="w-25 mt-3 btn btn-primary btn-lg" type="submit">Sign In</button>
          </form>  
          </section>
            </body>
            <div class="container" style="height:100px;width:200px"></div>
    <script src="/docs/5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
    
        <script src="checkout.js"></script>
    
    <container id="my-app-container"></container></body>
<%-include("footer.ejs")%>