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

<div class="panel-head">
  <h4>Equity curve</h4>
  <span class="meta">Realized cumulative · {{ year }}</span>
</div>

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

  <script>
  (function () {
    const opts = window.netAlphaChartTheme.merge(window.netAlphaChartTheme.defaults, {
      chart: { type: "area", height: 218 },
      colors: [window.netAlphaChartTheme.colors.pos],
      stroke: { width: 2, curve: "smooth", lineCap: "round" },
      fill: {
        type: "gradient",
        gradient: { shade: "dark", type: "vertical", opacityFrom: 0.30, opacityTo: 0, stops: [0, 100] },
      },
      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.toLocaleString(undefined, { maximumFractionDigits: 0 }) },
      },
      series: [{
        name: "Realized cumulative",
        data: [
          {% for p in points %}
            { x: "{{ p.on.isoformat() }}", y: {{ p.cumulative_realized|float }} }{% if not loop.last %},{% endif %}
          {% endfor %}
        ],
      }],
      annotations: {
        {% if unrealized_today is not none %}
        points: [{
          x: new Date("{{ points[-1].on.isoformat() }}").getTime(),
          y: {{ (points[-1].cumulative_realized|float + unrealized_today|float) }},
          marker: {
            size: 4,
            fillColor: window.netAlphaChartTheme.colors.violet,
            strokeColor: window.netAlphaChartTheme.colors.violet,
            strokeWidth: 0,
          },
          label: {
            text: "+ unrealized today",
            offsetY: -6,
            style: {
              color: "#fff",
              background: window.netAlphaChartTheme.colors.violet,
              fontSize: "10px",
              fontFamily: "Inter, sans-serif",
            },
          },
        }],
        {% endif %}
      },
    });

    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 %}