117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="page-header">
|
|
<h1>Debt Payoff Strategy</h1>
|
|
<a href="{{ url_for('debts_view') }}" class="btn btn-ghost">← Back to Debts</a>
|
|
</div>
|
|
|
|
<div class="card-wide" style="margin-bottom:1.5rem;">
|
|
<h2>How much can you put toward debt each month?</h2>
|
|
<p class="helper-text">Your current total minimums are <strong>${{ total_minimums | money }}</strong>. Enter your total monthly debt payment below — anything above the minimums gets applied strategically.</p>
|
|
<form method="POST" style="display:flex;gap:1rem;align-items:flex-end;flex-wrap:wrap;margin-top:1rem;">
|
|
<div class="form-group" style="margin:0;">
|
|
<label>Total Monthly Payment</label>
|
|
<input type="number" name="extra_monthly" step="0.01" min="{{ total_minimums }}"
|
|
value="{{ total_monthly or total_minimums }}" placeholder="{{ total_minimums }}">
|
|
</div>
|
|
<button type="submit" class="btn btn-primary">Calculate</button>
|
|
</form>
|
|
</div>
|
|
|
|
{% if av_months %}
|
|
<!-- Summary comparison -->
|
|
<div class="strategy-compare">
|
|
<div class="strategy-card strategy-avalanche">
|
|
<div class="strategy-label">Avalanche Method</div>
|
|
<div class="strategy-subtitle">Highest interest rate first</div>
|
|
<div class="strategy-stat">
|
|
<span>Debt-free in</span>
|
|
<strong>{{ av_months }} months</strong>
|
|
</div>
|
|
<div class="strategy-stat">
|
|
<span>Total interest paid</span>
|
|
<strong>${{ av_interest | money }}</strong>
|
|
</div>
|
|
<div class="strategy-badge">Saves the most money</div>
|
|
</div>
|
|
|
|
<div class="strategy-vs">VS</div>
|
|
|
|
<div class="strategy-card strategy-snowball">
|
|
<div class="strategy-label">Snowball Method</div>
|
|
<div class="strategy-subtitle">Smallest balance first</div>
|
|
<div class="strategy-stat">
|
|
<span>Debt-free in</span>
|
|
<strong>{{ sb_months }} months</strong>
|
|
</div>
|
|
<div class="strategy-stat">
|
|
<span>Total interest paid</span>
|
|
<strong>${{ sb_interest | money }}</strong>
|
|
</div>
|
|
<div class="strategy-badge">Faster wins, more motivation</div>
|
|
</div>
|
|
</div>
|
|
|
|
{% if interest_saved > 0 or months_diff != 0 %}
|
|
<div class="strategy-insight">
|
|
{% if interest_saved > 0 %}
|
|
<span>The Avalanche method saves you <strong>${{ interest_saved | money }}</strong> in interest</span>
|
|
{% endif %}
|
|
{% if months_diff > 0 %}
|
|
<span>The Snowball method takes <strong>{{ months_diff }} month{{ 's' if months_diff != 1 }}</strong> longer</span>
|
|
{% elif months_diff < 0 %}
|
|
<span>The Avalanche method takes <strong>{{ months_diff|abs }} month{{ 's' if months_diff|abs != 1 }}</strong> longer</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Side by side payoff order -->
|
|
<div class="strategy-tables">
|
|
<div class="strategy-table-wrap">
|
|
<h3>Avalanche Payoff Order</h3>
|
|
<table class="txn-table">
|
|
<thead>
|
|
<tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for d in avalanche | sort(attribute='paid_off_month') %}
|
|
<tr>
|
|
<td class="muted">{{ loop.index }}</td>
|
|
<td>{{ d.name }}</td>
|
|
<td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
|
|
<td>{{ d.paid_off_month or '—' }}</td>
|
|
<td class="amount">${{ d.total_interest | money }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="strategy-table-wrap">
|
|
<h3>Snowball Payoff Order</h3>
|
|
<table class="txn-table">
|
|
<thead>
|
|
<tr><th>#</th><th>Debt</th><th>Owner</th><th>Paid Off</th><th>Interest Paid</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for d in snowball | sort(attribute='paid_off_month') %}
|
|
<tr>
|
|
<td class="muted">{{ loop.index }}</td>
|
|
<td>{{ d.name }}</td>
|
|
<td><span class="owner-tag" style="background:{{ owner_colors.get(d.owner, '#ddd') }};">{{ d.owner }}</span></td>
|
|
<td>{{ d.paid_off_month or '—' }}</td>
|
|
<td class="amount">${{ d.total_interest | money }}</td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
{% else %}
|
|
<div class="empty-state">
|
|
<p>Add your debts and monthly payment amount above to see your payoff strategy.</p>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|