{%- 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="{% 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="{% 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="{% 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="{% 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.") %}
    {% else %}
    <div class="chart-bars">
        {% for bar in bars %}
        <div class="chart-bar-col" data-tooltip="{{ bar.value }} / {{ bar.count }} sale{% if bar.count != 1 %}s{% endif %}">
            <div class="chart-bar" style="height: {{ bar.height_pct }}%;"></div>
            <div class="chart-bar-label">{{ bar.label }}</div>
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>