{% extends 'calculators/base.html' %}
{% block content %}
<h3>Financial Calculators</h3>
<div class="row">
  <div class="col-md-6">
    <div class="card-glass p-3">
      <h5>Mortgage / Loan</h5>
      <label class="form-label">Principal</label>
      <input id="principal" class="form-control mb-2" type="number" />
      <label class="form-label">Annual Rate (%)</label>
      <input id="rate" class="form-control mb-2" type="number" step="0.01" />
      <label class="form-label">Years</label>
      <input id="years" class="form-control mb-2" type="number" />
      <button id="calc-mortgage" class="btn btn-outline-light">Calculate</button>
      <div id="mortgage-result" class="mt-3"></div>
    </div>
  </div>
</div>
{% endblock %}