<!doctype html>
<html>
  <head>
    <title>BMI Calculator</title>
    <link
      rel="stylesheet"
      href="{{ url_for('static', filename='style.css') }}"
    />
  </head>

  <body>
    <div class="container">
      <h1>BMI Calculator</h1>

      <form method="POST">
        <label>Age</label>
        <input type="number" name="age" required />

        <label>Gender</label>
        <label
          ><input type="radio" name="gender" value="male" required />
          Male</label
        >
        <label
          ><input type="radio" name="gender" value="female" /> Female</label
        >

        <input
          type="number"
          step="any"
          name="height"
          placeholder="Height (cm)"
          required
        />

        <input
          type="number"
          step="any"
          name="weight"
          placeholder="Weight (kg)"
          required
        />

        <button type="submit">Calculate</button>
      </form>

      {% if result %}

      <h2>BMI = {{result.bmi}} ({{result.category}})</h2>

      <ul>
        <li>Healthy BMI range: 18.5 kg/m² - 25 kg/m²</li>

        <li>
          Healthy weight for this height: {{result.min_weight}} kg -
          {{result.max_weight}} kg
        </li>

        <li>BMI Prime: {{result.bmi_prime}}</li>

        <li>Ponderal Index: {{result.ponderal}} kg/m³</li>
      </ul>

      {% endif %}
    </div>
  </body>
</html>
