<%-include('partials/navbar.ejs')-%>

    <div id="bmi-a"><br><br>
        <br><br>
        <br><br>
        <div class="container">
          <center>  <h1>Calculate Your BMI</h1>
            <p>BMI stands for Body Mass Index. It is a measure of body fat based on an individual's weight and height. The formula used to calculate BMI is weight in kilograms divided by the square of height in meters (BMI = kg/m^2).
                <br>
               -BMI is a widely used tool to estimate whether someone is underweight, normal weight, overweight, or obese. The following categories are commonly used to interpret BMI results:
                <br>
                -Underweight: BMI below 18.5
                <br>
                -Normal weight: BMI between 18.5 and 24.9
                <br>
                -Overweight: BMI between 25 and 29.9
                <br>
                -Obesity: BMI of 30 or higher
            <br></p></center>

            <form method="post" action="/bmicalc" autocomplete="off">
                <div class="row mb-3">
                    <center>
                    <label class="col-form-label">Your Name</label>
                    
                        <div class="col-sm-5">
                            <input type="text" name="name" placeholder="Please enter your name here" class="form-control">
                        </div>
                    </center>
                </div>
                <br>
                <br>
                <br>
                <div class="row mb-3">
                    <label class="col-sm-2 col-form-label">Weight</label>
                    <div class="col-sm-3">
                        <input type="text"placeholder="Enter weight (in KG)" name="weight" class="form-control">
                    </div>
                    <label class="col-sm-2 col-form-label">Height</label>
                    <div class="col-sm-3">
                        <input type="text" name="height" placeholder="Enter Height (in M)" class="form-control">
                    </div>
                </div>
                <center>

                    <button type="submit" class="btn btn-dark bn-outline-dark">Calculate!</button>
            </form>
            </center>
        </div>
    </div>
    <%-include('partials/footer.ejs')-%>