{# Torte + Legende (Ausbaustufe 13). segmente: Liste von Dicts
   {s: engine.pie.Slice, q: Query-String für den Drill-down oder None,
    gewaehlt: bool, zusatz: Zusatztext oder None}.
   Klickbar sind SVG-Segmente (hx-get direkt am <path>, kein SVG-<a>, weil
   htmx nur HTML-Links am Navigieren hindert) und die Legenden-Links (auch
   ohne JS und per Tastatur nutzbar). #}
{% macro seg_attrs(seg) -%}
class="seg {{ seg.s.color }}{% if seg.q %} klickbar{% endif %}{% if seg.gewaehlt %} gewaehlt{% endif %}"
{%- if seg.q %} hx-get="/aufteilung/kategorie?{{ seg.q }}" hx-target="#aufteilung-kategorie" hx-push-url="/aufteilung?{{ seg.q }}"{% endif %}
{%- endmacro %}

{% macro torte(segmente, titel) %}
<figure class="torte">
  <figcaption>{{ titel }}</figcaption>
  <svg class="torte-svg" viewBox="-1.05 -1.05 2.1 2.1" role="img" aria-label="{{ titel }}">
    {% for seg in segmente %}{% set s = seg.s %}
    {% if s.path %}<path d="{{ s.path }}" {{ seg_attrs(seg) }}><title>{{ s.label }}{% if s.merged %} ({{ s.members|join(', ') }}){% endif %}: {{ s.value|eur }} € ({{ s.share|pct }})</title></path>
    {% else %}<circle r="1" {{ seg_attrs(seg) }}><title>{{ s.label }}{% if s.merged %} ({{ s.members|join(', ') }}){% endif %}: {{ s.value|eur }} € ({{ s.share|pct }})</title></circle>{% endif %}
    {% endfor %}
  </svg>
  <ul class="legende">
    {% for seg in segmente %}{% set s = seg.s %}
    <li{% if seg.gewaehlt %} class="gewaehlt"{% endif %}><span class="swatch {{ s.color }}"></span>
      {%- if seg.q %}<a href="/aufteilung?{{ seg.q }}" hx-get="/aufteilung/kategorie?{{ seg.q }}" hx-target="#aufteilung-kategorie" hx-push-url="/aufteilung?{{ seg.q }}">{{ s.label }}</a>
      {%- else %}<span>{{ s.label }}</span>{% endif %}
      {%- if s.merged %} <span class="legende-zusatz">({{ s.members|join(', ') }})</span>{% endif %}
      <span class="legende-wert">{{ s.value|eur }} € · {{ s.share|pct }}{% if seg.zusatz %} · {{ seg.zusatz }}{% endif %}</span></li>
    {% endfor %}
  </ul>
</figure>
{% endmacro %}