{# Inputs: points: list[EquityPoint] (one row per realized event + Jan-1 zero seed),
           year: int #}

{% set unrealized_today = points[-1].unrealized if points else None %}
<div class="panel-head">
  <h4>Equity curve</h4>
  <span class="meta">
    Realized {% if unrealized_today is not none %}+ unrealized {% endif %}· {{ year }}
  </span>
</div>

{% if points|length <= 1 %}
  <div class="text-label-2 text-[13px] py-4">No realized activity in {{ year }}.</div>
{% else %}
  <div id="equity-chart-{{ year }}" style="height: 218px;"></div>

  <script>
  (function () {
    const hasTotal = {{ "true" if unrealized_today is not none else "false" }};
    const series = [{
      name: "Realized",
      type: "area",
      data: [
        {% for p in points %}
          { x: "{{ p.on.isoformat() }}", y: {{ p.cumulative_realized|float }} }{% if not loop.last %},{% endif %}
        {% endfor %}
      ],
    }];
    if (hasTotal) {
      series.push({
        name: "Total (incl. unrealized today)",
        type: "line",
        data: [
          {% for p in points %}
            { x: "{{ p.on.isoformat() }}", y: {{ (p.total_pl|float) if p.total_pl is not none else 'null' }} }{% if not loop.last %},{% endif %}
          {% endfor %}
        ],
      });
    }

    const opts = window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
      chart: { type: "line", height: 218 },
      colors: hasTotal
        ? [window.netAlphaChartTheme.colors.pos, window.netAlphaChartTheme.colors.violet]
        : [window.netAlphaChartTheme.colors.pos],
      stroke: {
        width: hasTotal ? [2, 2] : 2,
        curve: "smooth",
        lineCap: "round",
        dashArray: hasTotal ? [0, 4] : 0,
      },
      fill: {
        type: hasTotal ? ["gradient", "solid"] : "gradient",
        gradient: { shade: "dark", type: "vertical", opacityFrom: 0.30, opacityTo: 0, stops: [0, 100] },
        opacity: hasTotal ? [1, 1] : 1,
      },
      legend: { show: hasTotal },
      xaxis: {
        type: "datetime",
        labels: { format: "MMM" },
      },
      yaxis: {
        labels: {
          formatter: (v) => {
            const n = Math.round(v);
            const sign = n >= 0 ? "+" : "−";
            const abs = Math.abs(n);
            if (abs >= 1000) return sign + "$" + (abs / 1000).toFixed(0) + "k";
            return sign + "$" + abs;
          },
        },
      },
      tooltip: {
        x: { format: "yyyy-MM-dd" },
        y: { formatter: (v) => v == null ? "—" : "$" + v.toLocaleString(undefined, { maximumFractionDigits: 0 }) },
      },
      series: series,
    });

    function render() {
      const el = document.querySelector("#equity-chart-{{ year }}");
      if (!el) return;
      el.innerHTML = "";
      const chart = new ApexCharts(el, opts);
      chart.render();
    }

    if (window.ApexCharts) {
      render();
    } else {
      const iv = setInterval(() => {
        if (window.ApexCharts) { clearInterval(iv); render(); }
      }, 50);
    }
  })();
  </script>
{% endif %}