{% extends "admin/cards/base.html" %}

{% block content %}
<div class="chart-container relative min-h-[140px]" data-chart-id="{{ slug }}">
    <canvas id="card-chart-{{ slug }}"></canvas>
    <div id="card-chart-{{ slug }}-empty" class="hidden absolute inset-0 flex flex-col items-center justify-center gap-2">
        <svg class="w-8 h-8 text-stone-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
        </svg>
        <span class="text-xs text-stone-400 font-medium">No data for this period</span>
    </div>
</div>
{{ chart_data|json_script(slug, request.csp_nonce) }}
<script nonce="{{ request.csp_nonce }}">
  // Render chart (charts.js handles HTMX integration)
  if (window.AdminCharts) {
    window.AdminCharts.render('{{ slug }}');
  }
</script>
{% endblock %}