{% extends 'calculators/base.html' %}
{% block content %}
<h3>Specialized Calculators</h3>
<div class="row gy-3">
  <div class="col-md-6">
    <div class="card-glass p-3">
      <h5>BMI Calculator</h5>
      <label>Weight (kg)</label>
      <input id="weight" class="form-control mb-2" />
      <label>Height (m)</label>
      <input id="height" class="form-control mb-2" />
      <button id="bmi-calc" class="btn btn-outline-light">Calculate BMI</button>
      <div id="bmi-result" class="mt-2"></div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card-glass p-3">
      <h5>Unit Converter</h5>
      <label>Value</label>
      <input id="uc-val" class="form-control mb-2" />
      <select id="uc-dir" class="form-select mb-2">
        <option value="m2ft">m → ft</option>
        <option value="ft2m">ft → m</option>
      </select>
      <button id="uc-run" class="btn btn-outline-light">Convert</button>
      <div id="uc-result" class="mt-2"></div>
    </div>
  </div>
</div>
{% endblock %}