{%- import "partials/_ui.html" as ui -%}
<div class="stats-grid">
    {% for stat in stats %}
    <div class="card-muted">
        <div class="stat-label">{{ stat.label }}</div>
        <div class="stat-value">{{ stat.value }}</div>
        {% if let Some(change) = stat.change %}
        <div class="stat-change{% if stat.is_positive %} positive{% endif %}">{{ change }}</div>
        {% endif %}
    </div>
    {% endfor %}
</div>

<div class="chart-container">
    <div class="chart-header">
        <h2 class="subsection-title">Revenue Over Time</h2>
        <div class="time-selector">
            <button class="segment{% if active_range == "7d" %} is-selected{% endif %}"
                    hx-get="/dashboard/item/{{ item_id }}/analytics?range=7d"
                    hx-target="#item-analytics"
                    hx-swap="innerHTML">7d</button>
            <button class="segment{% if active_range == "30d" %} is-selected{% endif %}"
                    hx-get="/dashboard/item/{{ item_id }}/analytics?range=30d"
                    hx-target="#item-analytics"
                    hx-swap="innerHTML">30d</button>
            <button class="segment{% if active_range == "90d" %} is-selected{% endif %}"
                    hx-get="/dashboard/item/{{ item_id }}/analytics?range=90d"
                    hx-target="#item-analytics"
                    hx-swap="innerHTML">90d</button>
            <button class="segment{% if active_range == "all" %} is-selected{% endif %}"
                    hx-get="/dashboard/item/{{ item_id }}/analytics?range=all"
                    hx-target="#item-analytics"
                    hx-swap="innerHTML">All</button>
        </div>
    </div>
    {% if bars.is_empty() %}
    {% call ui::empty_state_chart("No revenue data yet. Sales will appear here once fans purchase this item.") %}{% endcall %}
    {% else %}
    {% include "partials/chart_bars.html" %}
    {% endif %}
</div>