{% extends "base.html" %}
{% block title %}{{ name }} · Wealth Dashboard{% endblock %}
{% block heading %}{{ name }}{% endblock %}
{% block lede %}
<p class="lede">{{ isin }}{% if symbol %} · {{ symbol }}{% endif %} · {{ accounts | join(', ') }}</p>
{% endblock %}
{% block content %}

{% if options | length > 1 %}
<div class="sec-ccy">
  <span class="sub">{{ _("Show in") }}</span>
  <div class="period-pills" role="tablist">
    {% for c_ in options %}
    <a class="period-btn {{ 'active' if c_ == shown }}" href="{{ url_for('security_page', isin=isin, ccy=(c_ if c_ != currency else None)) }}">{{ c_ }}<span class="sub"> {% if roles[c_] == 'paid' %}{{ _("paid in") }}{% elif roles[c_] == 'quoted' %}{{ _("quoted in") }}{% else %}{{ _("base") }}{% endif %}</span></a>
    {% endfor %}
  </div>
  {% if shown != currency %}<span class="sub">{{ _f("every amount at its own day's ECB rate; today's price at today's. The rows below stay as booked, in {currency}.", currency=currency) }}</span>{% endif %}
</div>
{% endif %}

<section class="stat-strip">
  <div class="stat-card stat-gold">
    <div class="stat-label">{{ _("Held") }}</div>
    <div class="stat-value {{ 'loss' if quantity < 0 }}">{{ qty(quantity) }}</div>
    <div class="stat-sub">{{ _("the running sum of every row below") }}</div>
  </div>
  <div class="stat-card stat-blue">
    <div class="stat-label">{{ _("Net invested") }}</div>
    <div class="stat-value">{{ money(net_invested, shown) }}</div>
    <div class="stat-sub">{% if realised.open_quantity > 0 and realised.avg_cost and shown == currency %}{{ _f("units held cost {amount}, {avg} each", amount=money(realised.open_cost, currency), avg=qty(realised.avg_cost | round(2))) }}{% else %}{{ _("buys minus sales, fees included") }}{% endif %}</div>
  </div>
  <div class="stat-card stat-green">
    <div class="stat-label">{{ _("Income") }}</div>
    <div class="stat-value">{{ money(income, shown) }}</div>
    <div class="stat-sub">{{ _("dividends and interest") }}{% if costs.fees or costs.taxes %} · {{ _f("fees {fees}, tax {taxes} paid", fees=money(costs.fees, shown), taxes=money(costs.taxes, shown)) }}{% endif %}</div>
  </div>
  <div class="stat-card stat-gold">
    <div class="stat-label" title="{{ _('Time-weighted: the return of the investment itself, with the timing of your own money taken out — what compares one holding to another.') }}">{{ _("Return (TWR)") }}</div>
    <div class="stat-value {{ 'gain' if perf.twr and perf.twr > 0 else ('loss' if perf.twr and perf.twr < 0) }}">{% if perf.twr is not none %}{{ '%+.1f' | format(100 * perf.twr) }} %{% else %}—{% endif %}</div>
    <div class="stat-sub">{% if perf.twr_annual is not none %}{{ _f("{pct} % a year, since {date}", pct='%+.1f' | format(100 * perf.twr_annual), date=d(perf.since)) }}{% elif perf.since %}{{ _f("since {date}", date=d(perf.since)) }}{% else %}{{ _("no price history yet — it arrives with the next price refresh") }}{% endif %}</div>
  </div>
  <div class="stat-card stat-blue">
    <div class="stat-label" title="{{ _('Money-weighted, the internal rate of return: the annual rate your own money earned, timing included — what a savings account would have had to pay.') }}">{{ _("Your money (MWR)") }}</div>
    <div class="stat-value {{ 'gain' if perf.mwr and perf.mwr > 0 else ('loss' if perf.mwr and perf.mwr < 0) }}">{% if perf.mwr is not none %}{{ '%+.1f' | format(100 * perf.mwr) }} %{% else %}—{% endif %}</div>
    <div class="stat-sub">{{ _("a year, on what went in and came out") }}</div>
  </div>
  <div class="stat-card stat-purple">
    <div class="stat-label">{{ _("Value") }}</div>
    <div class="stat-value">{% if price %}{{ money(quantity * price.price, price.currency) }}{% else %}—{% endif %}</div>
    <div class="stat-sub">{% if unrealised is not none %}<span class="{{ 'pos' if unrealised > 0 else ('neg' if unrealised < 0) }}">{{ _f("{amount} unrealised", amount=money(unrealised, price.currency)) }}</span> · {% endif %}{% if price %}{{ _f("at {price} on {date}", price=qty(price.price | round(2)), date=d(price.as_of)) }}{% if price.quoted %} · {{ _f("quoted {price} {currency}", price=qty(price.quoted.price | round(2)), currency=price.quoted.currency) }}{% endif %}{% else %}{{ _("no market price yet") }}{% endif %}</div>
  </div>
</section>

<div class="card">
  <div class="card-header">
    <h2>{{ _("Since the first purchase") }}</h2>
    <span class="card-subtitle" id="sec-chart-sub">{{ _("what it was worth against what went in, day by day") }}</span>
    <label class="sub" style="margin-left:auto; display:flex; align-items:center; gap:6px; font-weight:400"><input type="checkbox" id="sec-marks" style="width:auto; margin:0"> {{ _("Mark the trades") }}</label>
  </div>
  <div class="sec-change" id="sec-change" hidden>
    <span class="sec-change-value" id="sec-change-value"></span>
    <span class="sec-change-pct" id="sec-change-pct"></span>
    <span class="sub" id="sec-change-note"></span>
  </div>
  <div class="chart-wrap" style="height:300px"><canvas id="sec-chart"></canvas></div>
  <p class="sub">{{ _("Value is the units held times the price of the day — the market price where the app has one, the last price paid before that. Invested is buys minus sales, fees included. Dividends and interest are drawn as their own line, because they are return that never shows in the value.") }} {{ _("A price quoted in another currency than the shares were paid in is turned into theirs at the day's ECB rate, so the lines are one currency.") }}</p>
</div>

{% from "_benchmark.html" import benchmark_card with context %}
{{ benchmark_card(benchmarks, isin, shown) }}

{% if realised.sales %}
<div class="card">
  <div class="card-header">
    <h2>{{ _("Realised gains") }}</h2>
    <span class="card-subtitle">{{ _n(realised.sales | length, "{n} sale", "{n} sales") }} · {{ _("FIFO") if realised.method == 'fifo' else _("average cost") }} · <a href="{{ url_for('settings_page') }}#general">{{ _("change") }}</a></span>
  </div>
  <div class="table-wrap">
    <table class="grid">
      <thead><tr><th>{{ _("Date") }}</th><th>{{ _("Account") }}</th><th class="num">{{ _("Units sold") }}</th>
                 <th class="num">{{ _("Proceeds") }}</th><th class="num">{{ _("Cost of those units") }}</th><th class="num">{{ _("Gain") }}</th></tr></thead>
      <tbody>
      {% for s_ in realised.sales | reverse %}
        <tr>
          <td class="nowrap"><a href="#txn-{{ s_.id }}">{{ d(s_.date) }}</a></td>
          <td class="sub">{{ s_.account }}</td>
          <td class="num">{{ qty(s_.quantity) }}</td>
          <td class="num">{{ money(s_.proceeds, s_.currency) }}</td>
          <td class="num">{{ money(s_.cost, s_.currency) }}</td>
          <td class="num {{ 'pos' if s_.gain > 0 else ('neg' if s_.gain < 0) }}">{{ money(s_.gain, s_.currency) }}{% if s_.cost %}<span class="sub">{{ '%+.1f' | format(100 * s_.gain / s_.cost) }} %</span>{% endif %}</td>
        </tr>
      {% endfor %}
      {% for y, v in realised.by_year.items() | reverse %}
        <tr class="total"><td colspan="5">{{ y }}</td><td class="num {{ 'pos' if v > 0 else ('neg' if v < 0) }}">{{ money(v, currency) }}</td></tr>
      {% endfor %}
        <tr class="total"><td colspan="5">{{ _("All time") }}</td><td class="num {{ 'pos' if realised.total > 0 else ('neg' if realised.total < 0) }}">{{ money(realised.total, currency) }}</td></tr>
      </tbody>
    </table>
  </div>
  <p class="sub">{{ _("Each sale against the cost of the units it sold, lots kept per account — a unit bought at one broker is never sold at another. Under FIFO the oldest units go first, which is how Germany taxes; under average cost every unit costs the average paid, the French prix moyen pondéré. Units that arrived without a purchase — a transfer in — cost what their row says, or nothing; units that left without a sale realise nothing.") }}</p>
</div>
{% endif %}

<div class="card">
  <div class="card-header">
    <h2>{{ _("Every row behind this holding") }}</h2>
    <span class="card-subtitle">{{ _n(rows | length, "{n} row", "{n} rows") }} · {{ _("by year and month, newest first") }} · <a href="{{ url_for('security_csv', isin=isin) }}">{{ _("Export as CSV") }}</a></span>
  </div>
  <p class="sub">{{ _("If a figure is wrong — a quantity a statement read badly, a price in the wrong currency — correct it here. A correction stays: the next import recognises the row and leaves it alone. Sizes are typed unsigned; the kind supplies the sign. The amount is the whole cash effect as the broker booked it, fees and taxes included.") }}</p>
  <div class="sec-filter">
    <label class="scr-ctl">{{ _("Show") }}
      <select id="sec-kind" style="width:auto">
        <option value="">{{ _("everything") }}</option>
        <option value="buy">{{ kind_label('buy') }}</option>
        <option value="sell">{{ kind_label('sell') }}</option>
        <option value="dividend">{{ kind_label('dividend') }}</option>
        <option value="transfer">{{ kind_label('transfer') }}</option>
      </select></label>
    <button type="button" class="btn btn-ghost sec-toggle-all" data-open="0">{{ _("Expand all") }}</button>
  </div>

  {% for y in groups %}
  <div class="sec-year {{ 'is-open' if loop.first }}" data-year="{{ y.year }}">
    <div class="sec-head sec-year-head">
      <span class="sec-chev">▸</span>
      <span class="sec-title">{{ y.year }}</span>
      <span class="sec-sum">{{ _n(y.count, "{n} row", "{n} rows") }}
        {% if y.bought %} · {{ _f("{amount} bought", amount=money(y.bought, currency)) }}{% endif %}
        {% if y.sold %} · {{ _f("{amount} sold", amount=money(y.sold, currency)) }}{% endif %}
        {% if y.income %} · {{ _f("{amount} paid out", amount=money(y.income, currency)) }}{% endif %}</span>
    </div>
    <div class="sec-body">
    {% for mo in y.months %}
      <div class="sec-month {{ 'is-open' if loop.first and y.year == groups[0].year }}">
        <div class="sec-head sec-month-head">
          <span class="sec-chev">▸</span>
          <span class="sec-title">{{ mon(mo.month) }}</span>
          <span class="sec-sum">{{ _n(mo.count, "{n} row", "{n} rows") }}
            {% if mo.bought %} · {{ _f("{amount} bought", amount=money(mo.bought, currency)) }}{% endif %}
            {% if mo.sold %} · {{ _f("{amount} sold", amount=money(mo.sold, currency)) }}{% endif %}
            {% if mo.income %} · {{ _f("{amount} paid out", amount=money(mo.income, currency)) }}{% endif %}</span>
        </div>
        <div class="sec-body">
        {% for r in mo.rows %}
          <div class="sec-row" id="txn-{{ r.id }}" data-kind="{{ r.kind }}">
            <div class="sec-when">
              <span class="sec-badge is-{{ r.kind }}">{{ kind_label(r.kind) }}</span>
              <span class="sub">{{ d(r.txn_date) }}</span>
            </div>
            <div class="sec-what">
              <span class="sub">{{ r.account_name }} · {{ r.source or '—' }}{% if r.edited_at %} · {{ _f("corrected {date}", date=d(r.edited_at)) }}{% endif %}</span>
              <strong>{{ r.description[:80] }}</strong>
            </div>
            <div class="sec-costs num">
              <span class="sub">{{ _("fee") }} {{ qty(r.fee) if r.fee else '—' }}</span>
              <span class="sub">{{ _("tax") }} {{ qty(r.tax) if r.tax else '—' }}</span>
            </div>
            <div class="sec-money num">
              <strong class="{{ 'pos' if r.amount > 0 else ('neg' if r.amount < 0) }}">{{ money(r.amount, r.currency) }}</strong>
              <span>{% if r.quantity is not none %}<span class="sec-chip {{ 'is-out' if r.quantity < 0 }}">{{ qty(r.quantity) }}×</span>{% endif %}
                {% if r.price %}{{ qty(r.price) }}{% endif %}
                <span class="sub" title="{{ _('the quantity as it ran') }}">→ {{ qty(r.running) }}</span></span>
              {% if r.sale %}<span class="sub sec-gain"><span class="{{ 'pos' if r.sale.gain > 0 else ('neg' if r.sale.gain < 0) }}">{{ _f("{amount} realised", amount=money(r.sale.gain, r.currency)) }}</span> · {{ _f("cost {amount}", amount=money(r.sale.cost, r.currency)) }}</span>{% endif %}
            </div>
            <div class="sec-act"><button type="button" class="btn btn-ghost sec-edit" data-target="edit-{{ r.id }}">{{ _("Correct") }}</button></div>
          </div>
          <div class="sec-editrow" id="edit-{{ r.id }}" hidden>
            <form method="post" action="{{ url_for('transaction_edit', txn_id=r.id) }}" class="form inline sec-form">
              <input type="hidden" name="back" value="{{ url_for('security_page', isin=isin) }}#txn-{{ r.id }}">
              <div><label>{{ _("Date") }}</label><input name="txn_date" type="date" value="{{ r.txn_date }}" style="width:auto"></div>
              <div><label>{{ _("Kind") }}</label>
                <select name="kind" style="width:auto">
                  {% for k in r.kinds %}<option value="{{ k }}" {{ 'selected' if k == r.kind }}>{{ kind_label(k) }}</option>{% endfor %}
                </select></div>
              <div><label>{{ _("Quantity") }}</label><input name="quantity" inputmode="decimal" value="{{ '%g' | format(r.quantity | abs) if r.quantity is not none else '' }}" style="width:110px"></div>
              <div><label>{{ _("Price") }}</label><input name="price" inputmode="decimal" value="{{ '%g' | format(r.price) if r.price else '' }}" style="width:110px"></div>
              <div><label>{{ _f("Amount in {currency}", currency=r.currency) }}</label><input name="amount" inputmode="decimal" value="{{ '%.2f' | format(r.amount | abs) }}" style="width:120px"></div>
              {% if r.kind in directional %}
              <div><label>{{ _("Direction") }}</label>
                <select name="direction" style="width:auto"><option value="in" {{ 'selected' if r.amount >= 0 }}>{{ _("in") }}</option><option value="out" {{ 'selected' if r.amount < 0 }}>{{ _("out") }}</option></select></div>
              <div><label>{{ _("Units") }}</label>
                <select name="quantity_direction" style="width:auto"><option value="in" {{ 'selected' if not r.quantity or r.quantity >= 0 }}>{{ _("in") }}</option><option value="out" {{ 'selected' if r.quantity and r.quantity < 0 }}>{{ _("out") }}</option></select></div>
              {% endif %}
              <div><label>{{ _("Fee") }}</label><input name="fee" inputmode="decimal" value="{{ '%g' | format(r.fee) if r.fee else '' }}" style="width:90px"></div>
              <div><label>{{ _("Tax") }}</label><input name="tax" inputmode="decimal" value="{{ '%g' | format(r.tax) if r.tax else '' }}" style="width:90px"></div>
              <div style="flex-basis:100%"><label>{{ _("Description") }}</label><input name="description" value="{{ r.description }}"></div>
              <div><label>{{ _("Security name") }}</label><input name="security_name" value="{{ r.security_name or '' }}" style="width:260px"></div>
              <button type="submit">{{ _("Save correction") }}</button>
            </form>
            <form method="post" action="{{ url_for('transaction_delete', account_id=r.account_id, txn_id=r.id) }}" style="margin-top:6px" onsubmit="return confirm({{ _('Remove this row? An import or a sync will not bring it back.') | tojson }})">
              <input type="hidden" name="back" value="{{ url_for('security_page', isin=isin) }}">
              <button type="submit" class="btn-danger">{{ _("Remove this row") }}</button>
            </form>
          </div>
        {% endfor %}
        </div>
      </div>
    {% endfor %}
    </div>
  </div>
  {% endfor %}
  <p class="sub">{{ _("A correction survives the next import: the row is recognised by its id and left as you set it. So does a removal — the id is remembered, and an import or a sync leaves that row out.") }}</p>
</div>

<div class="card" id="add">
  <div class="card-header">
    <h2>{{ _("Add a transaction") }}</h2>
    <span class="card-subtitle">{{ _("for this holding — the ISIN and the name are filled in") }}</span>
  </div>
  {% if add_error %}<div class="flash flash-error">{{ add_error }}</div>{% endif %}
  {% if add_accounts %}
  <form method="post" action="{{ url_for('security_add', isin=isin) }}" class="form inline sec-form" id="sec-add">
    <div><label for="add-account">{{ _("Account") }}</label>
      <select id="add-account" name="account_id" style="width:auto">
        {% for a in add_accounts %}<option value="{{ a.id }}" {{ 'selected' if add_form.get('account_id') == a.id | string }}>{{ a.name }} ({{ a.currency }})</option>{% endfor %}
      </select></div>
    <div><label for="add-kind">{{ _("What happened") }}</label>
      <select id="add-kind" name="kind" style="width:auto">
        {% for k in add_kinds %}<option value="{{ k }}" {{ 'selected' if add_form.get('kind') == k }}>{{ kind_label(k) }}</option>{% endfor %}
      </select></div>
    <div><label for="add-date">{{ _("Date") }}</label><input id="add-date" name="txn_date" type="date" value="{{ add_form.get('txn_date') or today }}" max="{{ today }}" required style="width:auto"></div>
    <div data-for="{{ trades | join(' ') }}"><label for="add-qty">{{ _("Quantity") }}</label><input id="add-qty" name="quantity" value="{{ add_form.get('quantity', '') }}" inputmode="decimal" placeholder="10" style="width:90px"></div>
    <div data-for="{{ trades | join(' ') }}"><label for="add-price">{{ _("Price per unit") }}</label><input id="add-price" name="price" value="{{ add_form.get('price', '') }}" inputmode="decimal" placeholder="82.40" style="width:100px"></div>
    <div data-for="{{ trades | join(' ') }}"><label for="add-fee">{{ _("Fee") }}</label><input id="add-fee" name="fee" value="{{ add_form.get('fee', '') }}" inputmode="decimal" placeholder="1.00" style="width:80px"></div>
    <div data-for="{{ trades | join(' ') }}"><label for="add-tax">{{ _("Tax") }}</label><input id="add-tax" name="tax" value="{{ add_form.get('tax', '') }}" inputmode="decimal" style="width:80px"></div>
    <div data-for="{{ trades | join(' ') }}"><label for="add-total">{{ _("Total") }} <span class="sub">{{ _("optional") }}</span></label><input id="add-total" name="total" value="{{ add_form.get('total', '') }}" inputmode="decimal" style="width:100px"></div>
    <div data-not-for="{{ trades | join(' ') }}"><label for="add-amount">{{ _("Amount") }}</label><input id="add-amount" name="amount" value="{{ add_form.get('amount', '') }}" inputmode="decimal" placeholder="12.50" style="width:100px"></div>
    <div><label for="add-desc">{{ _("Description") }} <span class="sub">{{ _("optional") }}</span></label><input id="add-desc" name="description" value="{{ add_form.get('description', '') }}" style="width:180px"></div>
    <button type="submit">{{ _("Add") }}</button>
  </form>
  <p class="sub">{{ _("In the account's currency. A dividend, a fee or a tax added here is filed against this holding, so it shows among its rows and in its income above. Sizes are typed unsigned — whether the money went in or out follows from what happened.") }}</p>
  {% else %}
  <p class="sub">{{ _("There is no broker account to add it to — create one under Accounts first.") }}</p>
  {% endif %}
</div>

<div class="card" id="split">
  <div class="card-header">
    <h2>{{ _("Record a split") }}</h2>
    <span class="card-subtitle">{{ _("when the units changed and the money did not") }}</span>
  </div>
  <form method="post" action="{{ url_for('security_split', isin=isin) }}" class="form inline sec-form">
    <div><label>{{ _("Date") }}</label><input name="txn_date" type="date" required style="width:auto"></div>
    <div><label>{{ _("New for old") }}</label><input name="ratio" placeholder="44:1" required style="width:110px" inputmode="decimal"></div>
    <button type="submit">{{ _("Record the split") }}</button>
  </form>
  <p class="sub">{{ _("A split adds a row per account — the units that appeared, at no cost — so the quantity above is right from that day on. Earlier rows keep the units and prices of their day; the chart values them in today's units, as Yahoo's history is, and a lot keeps its cost, so a later sale realises the same gain it would have in the old units. Write 1:10 for a reverse split.") }}</p>
</div>
{% endblock %}

{% block scripts %}
<script>
{# The add form shows the fields the chosen kind needs — quantity and
   price for a trade, an amount for the rest. Without JavaScript every
   field shows and the server ignores the ones that do not apply. #}
(() => {
  const kind = document.getElementById('add-kind');
  if (!kind) return;
  const show = () => {
    document.querySelectorAll('#sec-add [data-for]').forEach((el) => { el.hidden = el.dataset.for.split(' ').indexOf(kind.value) < 0; });
    document.querySelectorAll('#sec-add [data-not-for]').forEach((el) => { el.hidden = el.dataset.notFor.split(' ').indexOf(kind.value) >= 0; });
  };
  kind.addEventListener('change', show);
  show();
})();
(async () => {
  const res = await fetch({{ url_for('api_security_history', isin=isin, ccy=shown) | tojson }});
  const data = await res.json();
  const pts = (data.points || []).filter((p) => p.value !== null || p.invested);
  if (!pts.length) { document.getElementById('sec-chart-sub').textContent = {{ _("no price history yet — it arrives with the next price refresh") | tojson }}; return; }
  const lang = {{ lang | tojson }};
  const ccy = data.currency || {{ shown | tojson }};
  const fmt = (v) => v == null ? '—' : v.toLocaleString(lang, { minimumFractionDigits: 0, maximumFractionDigits: 0 }) + '\u00a0' + ccy;
  const last = pts[pts.length - 1];
  const gain = last.value != null ? last.value + last.income - last.invested : null;
  const el = document.getElementById('sec-change');
  if (gain != null) {
    el.hidden = false;
    document.getElementById('sec-change-value').textContent = (gain >= 0 ? '+' : '') + fmt(gain);
    document.getElementById('sec-change-value').className = 'sec-change-value ' + (gain >= 0 ? 'pos' : 'neg');
    document.getElementById('sec-change-pct').textContent = last.invested ? ((gain >= 0 ? '+' : '') + (100 * gain / last.invested).toLocaleString(lang, { maximumFractionDigits: 1 }) + '%') : '';
    document.getElementById('sec-change-pct').className = 'sec-change-pct ' + (gain >= 0 ? 'pos' : 'neg');
    document.getElementById('sec-change-note').textContent = {{ _("value plus income, against what went in, since {date}") | tojson }}.replace('{date}', data.first || pts[0].date);
  }
  const css = (v) => getComputedStyle(document.documentElement).getPropertyValue(v).trim();
  {# The trades on the line: a mark per buy, sale, dividend or split on
     the day it happened, at the value of that day. A savings plan is
     forty marks a year and hides the line, so they are a switch,
     remembered, off by default once there are more than a handful. #}
  const EVENTS = {{ events | tojson }};
  const byDay = {}; pts.forEach((p) => { byDay[p.date] = p; });
  const dayIndex = {}; pts.forEach((p, i) => { dayIndex[p.date] = i; });
  const MARK = { buy: { c: css('--accent-blue'), s: 'circle', l: {{ _("Bought") | tojson }} },
                 sell: { c: css('--loss'), s: 'rectRot', l: {{ _("Sold") | tojson }} },
                 dividend: { c: css('--gain'), s: 'triangle', l: {{ _("Dividend") | tojson }} },
                 split: { c: css('--accent-gold'), s: 'rect', l: {{ _("Split") | tojson }} } };
  const marks = Object.keys(MARK).map((kind) => {
    const ev = EVENTS.filter((e) => e.kind === kind && dayIndex[e.date] !== undefined);
    return { label: MARK[kind].l, type: 'scatter', kind,
             data: ev.map((e) => ({ x: e.date, y: byDay[e.date].value, e })),
             backgroundColor: MARK[kind].c, borderColor: css('--bg-elevated'), borderWidth: 1.5,
             pointStyle: MARK[kind].s, pointRadius: 6, pointHoverRadius: 8, showLine: false, hidden: true, order: -1 };
  }).filter((d) => d.data.length);
  const chart = new Chart(document.getElementById('sec-chart'), {
    type: 'line',
    data: { labels: pts.map((p) => p.date), datasets: [
      { label: {{ _("Value") | tojson }}, data: pts.map((p) => p.value), borderColor: css('--accent-gold'), backgroundColor: 'rgba(245,215,110,0.08)', fill: true, pointRadius: 0, borderWidth: 2, spanGaps: true },
      { label: {{ _("Invested") | tojson }}, data: pts.map((p) => p.invested), borderColor: css('--accent-blue'), pointRadius: 0, borderWidth: 2, stepped: true },
      { label: {{ _("Income") | tojson }}, data: pts.map((p) => p.income), borderColor: css('--gain'), pointRadius: 0, borderWidth: 1.5, borderDash: [4, 4], stepped: true },
      ...marks,
    ] },
    options: { responsive: true, maintainAspectRatio: false, interaction: { mode: 'nearest', axis: 'x', intersect: false },
      plugins: { legend: { labels: { color: css('--text-secondary'), filter: (item, data) => !data.datasets[item.datasetIndex].kind || !data.datasets[item.datasetIndex].hidden } },
                 tooltip: { callbacks: { label: (c) => {
                   const e = c.raw && c.raw.e;
                   if (!e) return `${c.dataset.label}: ${fmt(c.parsed.y)}`;
                   const q = e.quantity != null ? Math.abs(e.quantity).toLocaleString(lang, { maximumFractionDigits: 6 }) + ' × ' : '';
                   return `${c.dataset.label}: ${q}${e.amount != null ? fmt(Math.abs(e.amount)) : ''}`;
                 } } } },
      scales: { x: { ticks: { color: css('--text-tertiary'), maxTicksLimit: 8, maxRotation: 0 }, grid: { display: false } },
                y: { ticks: { color: css('--text-tertiary'), callback: (v) => fmt(v) }, grid: { color: css('--border') } } } },
  });
  const box = document.getElementById('sec-marks');
  const total = marks.reduce((n, d) => n + d.data.length, 0);
  let want = null;
  try { want = localStorage.getItem('sec-marks'); } catch (e) {}
  box.checked = want === null ? total <= 12 : want === 'on';
  if (!total) box.parentElement.hidden = true;
  const applyMarks = () => {
    chart.data.datasets.forEach((d, i) => { if (d.kind) chart.setDatasetVisibility(i, box.checked); });
    chart.update();
  };
  box.addEventListener('change', () => { try { localStorage.setItem('sec-marks', box.checked ? 'on' : 'off'); } catch (e) {} applyMarks(); });
  applyMarks();
})();

const open = (el, on) => el.classList.toggle('is-open', on);
document.querySelectorAll('.sec-head').forEach((h) => {
  h.addEventListener('click', () => open(h.parentElement, !h.parentElement.classList.contains('is-open')));
});
document.querySelector('.sec-toggle-all').addEventListener('click', (ev) => {
  const on = ev.target.dataset.open !== '1';
  document.querySelectorAll('.sec-year, .sec-month').forEach((el) => open(el, on));
  ev.target.dataset.open = on ? '1' : '0';
  ev.target.textContent = on ? {{ _("Collapse all") | tojson }} : {{ _("Expand all") | tojson }};
});
document.querySelectorAll('.sec-edit').forEach((b) => {
  b.addEventListener('click', () => {
    const row = document.getElementById(b.dataset.target);
    row.hidden = !row.hidden;
  });
});
document.getElementById('sec-kind').addEventListener('change', (ev) => {
  const want = ev.target.value;
  document.querySelectorAll('.sec-row').forEach((r) => {
    const show = !want || r.dataset.kind === want;
    r.hidden = !show;
    document.getElementById('edit-' + r.id.slice(4)).hidden = true;
  });
  document.querySelectorAll('.sec-month').forEach((m) => {
    m.hidden = ![...m.querySelectorAll('.sec-row')].some((r) => !r.hidden);
  });
  document.querySelectorAll('.sec-year').forEach((y) => {
    y.hidden = ![...y.querySelectorAll('.sec-month')].some((m) => !m.hidden);
  });
});
// A correction that just landed: open the year and month it sits in,
// and the form it came from.
if (location.hash.startsWith('#txn-')) {
  const row = document.getElementById(location.hash.slice(1));
  if (row) {
    open(row.closest('.sec-month'), true); open(row.closest('.sec-year'), true);
    document.getElementById('edit-' + location.hash.slice(5)).hidden = false;
    row.scrollIntoView({ block: 'center' });
  }
}
</script>
{% endblock %}