{% extends "dashboard/base.html" %}
{% load humanize %}

{% block page_title %}My Sales{% endblock %}
{% block header_actions %}<a href="{% url 'dashboard:sale_create' %}" class="btn btn--primary btn--sm">Create Sale</a>{% endblock %}

{% block dashboard_content %}
{% if sales %}
<div class="grid grid--2">
    {% for sale in sales %}
    <div class="card animate-in" style="padding:0;overflow:hidden;">
        <div style="padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--color-border-light);">
            <div class="flex justify-between items-center mb-2">
                <h3 style="font-size:var(--font-size-base);font-weight:700;">{{ sale.title }}</h3>
                <span class="badge badge--{{ sale.status }}">{{ sale.get_status_display }}</span>
            </div>
            <p class="text-sm text-muted">{{ sale.start_at|date:"M d" }} - {{ sale.end_at|date:"M d, Y" }}</p>
            <p class="text-xs text-muted mt-2">{{ sale.items.count }} item{{ sale.items.count|pluralize }} -- {{ sale.view_count }} view{{ sale.view_count|pluralize }}</p>
        </div>
        <div style="padding:var(--space-4) var(--space-6);" class="flex gap-2">
            <a href="{% url 'dashboard:sale_manage' sale.id %}" class="btn btn--secondary btn--sm" style="flex:1;">Manage</a>
            <a href="{% url 'sales:detail' sale.slug %}" class="btn btn--ghost btn--sm" target="_blank">View Page</a>
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="empty-state">
    <h3 class="empty-state__title">No sales yet</h3>
    <p class="empty-state__desc">Create your first sale by selecting products and setting a time window.</p>
    <a href="{% url 'dashboard:sale_create' %}" class="btn btn--primary">Create Sale</a>
</div>
{% endif %}
{% endblock %}