{% extends "base.html" %}
{% from "_notes.html" import fine_print %}
{% block title %}Expenses · Networthy HQ{% endblock %}
{% block main_class %}wide{% endblock %}
{% block content %}

<section class="nw-page-head">
  <h1>Expenses</h1>
  <p class="muted">
    Your recurring expenses, normalised to a monthly &amp; annual burn rate — and
    what it means for your net worth. Loan EMIs live under Liabilities, not here.
  </p>
</section>

{% if has_expenses %}
<section class="exp-hero">
  <div class="dash-card exp-burn">
    <span class="eyebrow">Monthly burn</span>
    <div class="hero-nw num"><span class="rs">₹</span>{{ "{:,.0f}".format(monthly_total) }}</div>
    <span class="hero-note">₹{{ "{:,.0f}".format(annual_total) }} a year</span>
  </div>

  <div class="dash-card exp-fire">
    <div class="exp-stat">
      <span class="eyebrow">Net-worth runway</span>
      {% if runway_years is not none %}
      <span class="exp-figure num">{{ "{:.1f}".format(runway_years) }} <span class="exp-unit">yrs</span></span>
      <span class="hero-note">₹{{ "{:,.0f}".format(net_worth) }} ÷ annual expenses</span>
      {% else %}
      <span class="exp-figure">—</span>
      {% endif %}
    </div>
    <div class="exp-stat">
      <span class="eyebrow">FIRE target · {{ "%g"|format(swr_pct) }}% SWR ({{ "%.0f"|format(fire_multiple) }}×)</span>
      {% if fire_target %}
      <span class="exp-figure num">₹{{ "{:,.0f}".format(fire_target) }}</span>
      <div class="fire-bar"><span style="width: {{ '%.1f'|format([fire_pct, 100]|min) }}%"></span></div>
      <span class="hero-note">{{ "%.0f"|format(fire_pct) }}% there · <a href="#swr">change the rate</a></span>
      {% else %}
      <span class="exp-figure">—</span>
      {% endif %}
    </div>
  </div>
</section>

{% if swr_ladder %}
<section class="dash-card swr-card" id="swr">
  <h2>What withdrawal rate?</h2>
  <p class="muted swr-lead">
    The famous <strong>4% rule (25×)</strong> is a US result — the Trinity study ran US
    stocks and bonds over 1926–1995, a 30-year retirement, ~3% inflation, with Social
    Security underneath. India isn't that: general inflation runs ~6%, healthcare faster
    still, the return history is shorter, and there's no state pension floor. A
    <strong>2.5–3%</strong> rate is the more defensible assumption here — which means a
    corpus of <strong>33–40×</strong> your annual spend, not 25×.
  </p>

  <form method="post" action="/expenses/swr" class="swr-ladder">
    {% for r in swr_ladder %}
    <div class="swr-row{% if r.current %} swr-row--current{% endif %}">
      <div class="swr-rate">
        <b class="num">{{ "%g"|format(r.pct) }}%</b>
        <span class="swr-mult">{{ "%.0f"|format(r.multiple) }}×</span>
      </div>
      <div class="swr-meat">
        <div class="swr-head">
          <span class="swr-label">{{ r.label }}{% if r.current %} <span class="swr-you">· yours</span>{% endif %}</span>
          <span class="swr-target num">₹{{ "{:,.0f}".format(r.target) }}</span>
        </div>
        <div class="fire-bar"><span style="width: {{ '%.1f'|format([r.progress_pct, 100]|min) }}%"></span></div>
        <div class="swr-foot">
          <span class="muted">{{ r.note }}</span>
          <span class="swr-there">{{ "%.0f"|format(r.progress_pct) }}% there</span>
        </div>
      </div>
      <div class="swr-pick">
        {% if r.current %}
        <span class="swr-current-tag">in use</span>
        {% else %}
        <button type="submit" name="swr_pct" value="{{ r.pct }}">Use this</button>
        {% endif %}
      </div>
    </div>
    {% endfor %}
  </form>

  <form method="post" action="/expenses/swr" class="swr-custom">
    <label>Or set your own rate
      <input type="number" name="swr_pct" step="0.1" min="{{ swr_min }}" max="{{ swr_max }}"
             value="{{ '%g'|format(swr_pct) }}" required>
      <span class="swr-pct-sign">%</span>
    </label>
    <button class="btn" type="submit">Save</button>
    <span class="muted swr-hint">Lower rate → bigger corpus → more margin for a bad decade.</span>
  </form>

  {{ fine_print("Withdrawal rates are rules of thumb drawn from historical market
  data, not guarantees — no rate is 'safe', and the right one depends on your horizon,
  your assets and your ability to spend less in a bad year. Runway assumes today's
  net worth and today's burn, with no growth and no inflation.") }}
</section>
{% endif %}

{% if breakdown %}
<section class="dash-card alloc-card">
  <h2>Where it goes</h2>
  <div class="alloc-strip">
    {% for b in breakdown %}
    <span style="width: {{ '%.2f'|format(b.pct) }}%; background: {{ b.color }}"
          title="{{ b.label }} · ₹{{ '{:,.0f}'.format(b.value) }}/yr ({{ '%.1f'|format(b.pct) }}%)"></span>
    {% endfor %}
  </div>
  <ul class="alloc-legend">
    {% for b in breakdown %}
    <li>
      <span class="swatch" style="background: {{ b.color }}"></span>
      <span class="lname">{{ b.label }}</span>
      <span class="lval">₹{{ "{:,.0f}".format(b.value) }}/yr</span>
    </li>
    {% endfor %}
  </ul>
</section>
{% endif %}
{% endif %}

<p class="exp-lead muted">
  Fill in whatever applies under each category — the count multiplies the amount, handy for
  per-person costs (×2 kids, ×4 members). Anything that doesn't fit goes under <strong>Other</strong>.
</p>

{% for s in sections %}
{% set ed = (s.entries | selectattr('id','equalto',edit_id) | first) if edit_id else none %}
<section class="dash-card exp-cat" id="cat-{{ s.slug }}">
  <div class="exp-cat-head">
    <span class="dot" style="background: {{ s.color }}"></span>
    <h3>{{ s.label }}</h3>
    {% if s.total %}<span class="exp-cat-total num">₹{{ "{:,.0f}".format(s.total) }}<span class="per">/yr</span></span>{% endif %}
  </div>

  {% if s.entries %}
  <table class="holdings exp-cat-table">
    <tbody>
      {% for e in s.entries %}
      <tr{% if ed and ed.id == e.id %} class="row-editing"{% endif %}>
        <td class="h-name">{{ e.name }}{% if e.notes %} <span class="h-isin muted">{{ e.notes }}</span>{% endif %}</td>
        <td class="num">₹{{ "{:,.0f}".format(e.amount) }}</td>
        <td>{{ e.frequency_label }}</td>
        <td class="num">{{ ("× " ~ e.count) if e.count and e.count > 1 else "" }}</td>
        <td class="num">₹{{ "{:,.0f}".format(e.monthly) }}/mo</td>
        <td class="num nw-actions">
          <a class="link-edit" href="?edit={{ e.id }}#editform">edit</a>
          <form method="post" action="/expenses/{{ e.id }}/delete"
                onsubmit="return confirm('Delete this expense?');">
            <button class="link-danger" type="submit">delete</button>
          </form>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}

  <form class="exp-add-row{% if ed %} edit-glow{% endif %}"{% if ed %} id="editform"{% endif %} method="post" action="/expenses/add">
    <input type="hidden" name="category" value="{{ s.slug }}">
    {% if ed %}<input type="hidden" name="id" value="{{ ed.id }}">{% endif %}
    <input class="exp-name" name="name" placeholder="{{ s.example }}" value="{{ ed.name if ed else '' }}" required>
    <input class="exp-amt" name="amount" type="number" step="any" min="0" placeholder="Amount ₹" required
           aria-label="Amount" value="{{ ed.amount if ed else '' }}">
    <select class="exp-freq" name="frequency" aria-label="Frequency">
      {% for slug, f in frequencies.items() %}<option value="{{ slug }}"{{ ' selected' if (ed.frequency == slug if ed else slug == 'monthly') else '' }}>{{ f.label }}</option>{% endfor %}
    </select>
    <input class="exp-count" name="count" type="number" step="1" min="1" placeholder="× 1" aria-label="Count" value="{{ ed.count if ed and ed.count and ed.count > 1 else '' }}">
    {% if ed %}<a class="link-muted cancel-edit" href="?#cat-{{ s.slug }}">Cancel</a>{% endif %}
    <button class="btn" type="submit">{{ "Save" if ed else "Add" }}</button>
  </form>
</section>
{% endfor %}

{% endblock %}