<section class="chart-card">
  <div class="chart-card-head">
    <div><h3>{{ item.chart.name }}</h3>{% if item.chart.description %}<p>{{ item.chart.description }}</p>{% endif %}</div>
    <span class="chart-total">{{ item.total }} Geräte</span>
  </div>
  {% if not item['items'] %}
    <div class="chart-empty">Keine passenden Daten vorhanden.</div>
  {% elif item.chart.chart_type in ['donut', 'pie'] %}
    <div class="donut-layout">
      <div class="donut-chart {% if item.chart.chart_type == 'pie' %}pie-chart{% endif %}" style="background: conic-gradient({{ item.donut_gradient }})"><span>{{ item.total }}</span></div>
      <div class="chart-legend">
      {% for label, value in item['items'] %}
        <div><i style="--legend-color:var(--chart-color-{{ loop.index0 % 12 }})"></i><span>{{ label }}</span><strong>{{ value }}</strong></div>
      {% endfor %}
      </div>
    </div>
  {% elif item.chart.chart_type == 'stacked_bar' %}
    <div class="stack-legend">{% for stack in item.stack_values %}<span><i style="--legend-color:var(--chart-color-{{ loop.index0 % 12 }})"></i>{{ stack }}</span>{% endfor %}</div>
    <div class="bar-chart stacked-chart">
    {% for label, values in item['items'] %}
      {% set row_total = values.values()|sum %}
      <div class="bar-row"><div class="bar-label" title="{{ label }}">{{ label }}</div><div class="bar-track">
        {% for stack in item.stack_values %}{% set count = values.get(stack, 0) %}{% if count %}<div class="bar-segment" title="{{ stack }}: {{ count }}" style="width:{{ (count / item.maximum * 100)|round(2) }}%;--segment-color:var(--chart-color-{{ loop.index0 % 12 }})"><span>{{ count }}</span></div>{% endif %}{% endfor %}
      </div><strong class="bar-value">{{ row_total }}</strong></div>
    {% endfor %}
    </div>
  {% else %}
    <div class="bar-chart">
    {% for label, value in item['items'] %}
      <div class="bar-row"><div class="bar-label" title="{{ label }}">{{ label }}</div><div class="bar-track"><div class="bar-segment" style="width:{{ (value / item.maximum * 100)|round(2) }}%;--segment-color:var(--chart-color-{{ loop.index0 % 12 }})"><span>{{ value }}</span></div></div><strong class="bar-value">{{ value }}</strong></div>
    {% endfor %}
    </div>
  {% endif %}
</section>