{% extends "dashboard/base.html" %}
{% load humanize %}
{% block page_title %}Analytics{% endblock %}

{% block dashboard_content %}
{% if sales %}
<div class="grid grid--2">
    {% for sale in sales %}
    <div class="card animate-in">
        <div class="flex justify-between items-center mb-3">
            <a href="{% url 'dashboard:sale_manage' sale.id %}" style="font-weight:700;font-size:var(--font-size-lg);">{{ sale.title }}</a>
            <span class="badge badge--{{ sale.status }}">{{ sale.get_status_display }}</span>
        </div>
        <div class="grid grid--3 gap-3 mb-4 text-center">
            <div class="card card--flat" style="padding:var(--space-3);">
                <div class="text-xs text-muted">Views</div>
                <div style="font-weight:700;font-size:var(--font-size-lg);">{{ sale.view_count|intcomma }}</div>
            </div>
            <div class="card card--flat" style="padding:var(--space-3);">
                <div class="text-xs text-muted">Paid Orders</div>
                <div style="font-weight:700;font-size:var(--font-size-lg);">{{ sale.order_count|default:"0" }}</div>
            </div>
            <div class="card card--flat" style="padding:var(--space-3);">
                <div class="text-xs text-muted">Revenue</div>
                <div style="font-weight:700;font-size:var(--font-size-base);color:var(--color-primary);">GHS {{ sale.revenue|default:"0.00"|floatformat:2 }}</div>
            </div>
        </div>
        <div class="flex justify-between items-center text-xs text-muted pt-2" style="border-top:1px solid var(--color-border-light);">
            <span>Date Window</span>
            <span>{{ sale.start_at|date:"M d, Y" }} - {{ sale.end_at|date:"M d, Y" }}</span>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No data yet</h3>
    <p class="empty-state__desc">Analytics will appear here after you create your first sale.</p>
</div>
{% endif %}
{% endblock %}