<%-include("header.ejs")%>
    <div class="selector d-flex flex-column justify-content-center align-items-center bg-body-tertiary rounded-pill">
      <div class="container">
        <h1>Specifications for House</h1>
      </div>
        <form action="/address" method="POST" class="col-md-12 d-flex flex-column align-items-center" style="gap:30px">
          <div class="d-flex col-md-8 justify-content-center" style="gap:10px">
            <div class="col-md-4">
              <label for="country" class="form-label">Country</label>
              <select class="form-select" id="country" name="Country"   required="">
                <option value="">Choose...</option>
                <option values>United States</option>
              </select>
              <div class="invalid-feedback">
                Please select a valid country.
              </div>
            </div>
            <div class="col-md-4">
              <label for="state" class="form-label">State</label>
              <select class="form-select" id="state" name="state" required="">
                <option value="">Choose...</option>
                <option value="California">California</option>
                <option value="Florida">Florida</option>
              </select>
              <div class="invalid-feedback">
                Please provide a valid state.
              </div>
            </div>
          </div>
            <div class="col-md-4">
                <label for="state" class="form-label">Type of house required</label>
                <select class="form-select" id="state" name="house" required="" >
                  <option value="">Choose...</option>
                  <option value="condo">Condo</option>
                  <option value="apartment">Apartment</option>
                  <option value="villa">Villa</option>
                </select>
                <div class="invalid-feedback">
                  Please provide a valid type.
                </div>
              </div>
            <div class="d-flex justify-content-center align-items-center" style="gap:20px">
            <div class="col-md-6">
              <label for="size" class="form-label">Size of house</label>
              <input class="form-control" id="size" name="size" required="" placeholder="00bhk">
              </select>
              <div class="invalid-feedback">
                Please select a valid country.
              </div>
            </div>
            <div class="col-md-6 ">
              <label for="state" class="form-label">Amenities Available</label>
              <select class="form-select" id="state" name="amenities" required="">
                <option value="">Choose...</option>
                <option value="Jacuzzi ">Jacuzzi</option>
                <option value="Pool">Swimming Pool</option>
                <option value="Jacuzzi,Swimming Pool">All Above</option>
              </select>
              <div class="invalid-feedback">
                Please provide a valid state.
              </div>
            </div>
          </div>
            <div class="d-flex flex-column align-items-center">
            <p >Price Range</p>
            <div class="d-flex justify-content-center" style="gap:20px" >
            <div class="col-md-2">
                <label for="from" class="form-label">From</label>
                <input type="number" class="form-control" id="from" name="price" required="">
                <div class="invalid-feedback">
                  Please provide a valid type.
                </div>
              </div>
                <div class="col-md-2">
                <label for="to" class="form-label">To</label>
                <input type="number" class="form-control" id="to" name="price" required="">
                <div class="invalid-feedback">
                  Please provide a valid type.
                </div>
              </div>
            </div>
            </div>    

          <button class="btn btn-primary btn-lg w-25 mt-4 mb-2" style="width:40px;margin-top:35px!important" type="submit">Continue</button>
        </form>
</div>
      </div>
      <container id="my-app-container"></container>
      <div class="container" style="height:100px;width:100px"></div>
  </main>
<%-include("footer.ejs")%>