Moon-Household-Budget/templates/mortgage.html

{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Mortgage Tracker</h1>
</div>

<!-- Setup form -->
<div class="card-wide" style="margin-bottom:1.75rem;">
  <h2>Mortgage Details</h2>
  <p class="helper-text">Fill these in once you close on your home. Everything calculates automatically.</p>
  <form method="POST" class="bill-form">
    <div class="bill-form-grid">
      <div class="form-group">
        <label>Loan Amount</label>
        <input type="number" name="principal" step="0.01" min="0"
          value="{{ principal or '' }}" placeholder="e.g. 280000">
      </div>
      <div class="form-group">
        <label>Interest Rate (APR %)</label>
        <input type="number" name="annual_rate" step="0.001" min="0" max="20"
          value="{{ annual_rate or '' }}" placeholder="e.g. 6.875">
      </div>
      <div class="form-group">
        <label>Loan Term</label>
        <select name="term_years">
          <option value="30" {% if term_years == 30 %}selected{% endif %}>30 years</option>
          <option value="20" {% if term_years == 20 %}selected{% endif %}>20 years</option>
          <option value="15" {% if term_years == 15 %}selected{% endif %}>15 years</option>
          <option value="10" {% if term_years == 10 %}selected{% endif %}>10 years</option>
        </select>
      </div>
      <div class="form-group">
        <label>First Payment Date</label>
        <input type="date" name="start_date" value="{{ start_date or '' }}">
      </div>
      <div class="form-group">
        <label>Extra Monthly Payment <span class="optional">(optional)</span></label>
        <input type="number" name="extra_monthly" step="0.01" min="0"
          value="{{ extra_monthly or '' }}" placeholder="0.00">
      </div>
    </div>
    <button type="submit" class="btn btn-primary">Save & Calculate</button>
  </form>
</div>

{% if principal %}
<!-- Summary cards -->
<div class="mortgage-summary">
  <div class="card">
    <div class="card-label">Monthly Payment</div>
    <div class="card-value">${{ base_payment | money }}</div>
  </div>
  <div class="card">
    <div class="card-label">Current Balance</div>
    <div class="card-value">${{ "{:,.0f}".format(current_bal) }}</div>
  </div>
  <div class="card">
    <div class="card-label">Total Interest (standard)</div>
    <div class="card-value">${{ "{:,.0f}".format(total_interest_standard) }}</div>
  </div>
  <div class="card">
    <div class="card-label">Payoff</div>
    <div class="card-value">{{ standard_months }} mo</div>
  </div>
</div>

<!-- Strategy comparison -->
<section class="section">
  <h2>Payment Strategies</h2>
  <div class="mortgage-strategies">

    <!-- Standard -->
    <div class="mortgage-strategy-card" style="border-top:4px solid #B8B8B8;">
      <div class="strategy-label">Standard Monthly</div>
      <div class="strategy-subtitle">Pay ${{ base_payment | money }}/month</div>
      <div class="strategy-stat"><span>Payoff</span><strong>{{ standard_months }} months ({{ (standard_months / 12) | round(1) }} yrs)</strong></div>
      <div class="strategy-stat"><span>Total interest</span><strong>${{ "{:,.2f}".format(total_interest_standard) }}</strong></div>
      <div class="strategy-stat"><span>Interest saved</span><strong>—</strong></div>
    </div>

    <!-- Biweekly -->
    <div class="mortgage-strategy-card" style="border-top:4px solid #A8C5A0;">
      <div class="strategy-label">Biweekly Payments</div>
      <div class="strategy-subtitle">Pay ${{ (base_payment / 2) | money }} every 2 weeks</div>
      <div class="strategy-stat"><span>Payoff</span><strong>{{ bi_months_total }} months ({{ bi_years }} yrs)</strong></div>
      <div class="strategy-stat"><span>Total interest</span><strong>${{ "{:,.2f}".format(bi_interest) }}</strong></div>
      <div class="strategy-stat"><span>Interest saved</span>
        <strong class="accent">${{ "{:,.2f}".format(interest_saved_biweekly) }}
        ({{ months_saved_biweekly }} months sooner)</strong>
      </div>
      <div class="strategy-badge">One extra payment per year</div>
    </div>

    <!-- Extra monthly -->
    {% if extra_monthly > 0 %}
    <div class="mortgage-strategy-card" style="border-top:4px solid #D4B8C5;">
      <div class="strategy-label">Extra ${{ "%.0f" | format(extra_monthly) }}/Month</div>
      <div class="strategy-subtitle">Pay ${{ (base_payment + extra_monthly) | money }}/month total</div>
      <div class="strategy-stat"><span>Payoff</span><strong>{{ extra_months }} months ({{ (extra_months / 12) | round(1) }} yrs)</strong></div>
      <div class="strategy-stat"><span>Total interest</span><strong>${{ "{:,.2f}".format(total_interest_extra) }}</strong></div>
      <div class="strategy-stat"><span>Interest saved</span>
        <strong class="accent">${{ "{:,.2f}".format(interest_saved_extra) }}
        ({{ months_saved_extra }} months sooner)</strong>
      </div>
    </div>
    {% else %}
    <div class="mortgage-strategy-card mortgage-strategy-empty" style="border-top:4px solid #D4B8C5;">
      <div class="strategy-label">Extra Monthly Payment</div>
      <div class="strategy-subtitle">Enter an extra monthly amount above to see the impact</div>
    </div>
    {% endif %}

  </div>
</section>

<!-- Amortization schedule -->
<section class="section">
  <details class="amortization-details">
    <summary class="amortization-toggle">
      View Full Amortization Schedule
      <span class="muted">({{ schedule | length }} payments)</span>
    </summary>
    <div class="amortization-wrap">
      <table class="txn-table txn-table-full amortization-table">
        <thead>
          <tr>
            <th>#</th>
            <th>Date</th>
            <th>Payment</th>
            <th>Principal</th>
            <th>Interest</th>
            <th>Balance</th>
          </tr>
        </thead>
        <tbody>
          {% for row in schedule %}
          <tr class="{% if row.interest > row.principal %}amort-interest-heavy{% endif %}">
            <td class="muted">{{ row.month }}</td>
            <td>{{ row.date }}</td>
            <td class="amount">${{ row.payment | money }}</td>
            <td class="amount">${{ row.principal | money }}</td>
            <td class="amount amort-interest">${{ row.interest | money }}</td>
            <td class="amount">${{ "{:,.2f}".format(row.balance) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </details>
</section>

{% else %}
<div class="empty-state">
  <p>Enter your mortgage details above once you close on your home and everything will calculate automatically.</p>
</div>
{% endif %}
{% endblock %}