{% extends "base.html" %}
{% load static %}

{% block title %}Live Sales -- {{ PLATFORM_NAME }}{% endblock %}

{% block content %}
<section class="section">
    <div class="container">
        <div class="section__header">
            <h1>Live & Upcoming Sales</h1>
            <p class="section__subtitle">Browse flash sales from businesses across Ghana</p>
        </div>

        <div class="grid grid--3">
            {% for sale in sales %}
            {% if sale.is_ended %}
            <div class="card product-card product-card--ended" style="opacity: 0.65; cursor: not-allowed; text-decoration:none; color:inherit;">
                <div class="product-card__image-wrapper" style="filter: grayscale(40%);">
                    {% with first_item=sale.items.first %}
                    {% if first_item and first_item.product.primary_image %}
                    <img src="{{ first_item.product.primary_image.image.url }}" alt="{{ sale.title }}" class="product-card__image" loading="lazy">
                    {% else %}
                    <div style="width:100%;height:200px;background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));display:flex;align-items:center;justify-content:center;">
                        <span style="font-size:var(--font-size-2xl);font-weight:800;color:var(--color-primary);">{{ sale.business.name|first }}</span>
                    </div>
                    {% endif %}
                    {% endwith %}
                    <span class="product-card__badge badge badge--ended">Ended</span>
                </div>
                <div class="product-card__body">
                    <div class="flex items-center gap-2 mb-2">
                        {% if sale.business.logo %}
                        <img src="{{ sale.business.logo.url }}" alt="" style="width:24px;height:24px;border-radius:50%;object-fit:cover;">
                        {% endif %}
                        <span class="text-xs text-muted">{{ sale.business.name }}</span>
                    </div>
                    <h3 class="product-card__name text-muted">{{ sale.title }}</h3>
                    <p class="text-sm text-muted mt-2">
                        Ended {{ sale.end_at|date:"M d, Y H:i" }}
                    </p>
                    <p class="text-xs text-muted mt-2">{{ sale.items.count }} product{{ sale.items.count|pluralize }}</p>
                </div>
            </div>
            {% else %}
            <a href="{% url 'sales:detail' sale.slug %}" class="card product-card" style="text-decoration:none;color:inherit;">
                <div class="product-card__image-wrapper">
                    {% with first_item=sale.items.first %}
                    {% if first_item and first_item.product.primary_image %}
                    <img src="{{ first_item.product.primary_image.image.url }}" alt="{{ sale.title }}" class="product-card__image" loading="lazy">
                    {% else %}
                    <div style="width:100%;height:200px;background:linear-gradient(135deg,var(--color-primary-50),var(--color-primary-100));display:flex;align-items:center;justify-content:center;">
                        <span style="font-size:var(--font-size-2xl);font-weight:800;color:var(--color-primary);">{{ sale.business.name|first }}</span>
                    </div>
                    {% endif %}
                    {% endwith %}
                    <span class="product-card__badge badge badge--{{ sale.status }}">{{ sale.get_status_display }}</span>
                </div>
                <div class="product-card__body">
                    <div class="flex items-center gap-2 mb-2">
                        {% if sale.business.logo %}
                        <img src="{{ sale.business.logo.url }}" alt="" style="width:24px;height:24px;border-radius:50%;object-fit:cover;">
                        {% endif %}
                        <span class="text-xs text-muted">{{ sale.business.name }}</span>
                    </div>
                    <h3 class="product-card__name">{{ sale.title }}</h3>
                    <p class="text-sm text-muted mt-2">
                        {% if sale.is_live %}Ends {{ sale.end_at|date:"M d, Y H:i" }}
                        {% else %}Starts {{ sale.start_at|date:"M d, Y H:i" }}{% endif %}
                    </p>
                    <p class="text-xs text-muted mt-2">{{ sale.items.count }} product{{ sale.items.count|pluralize }}</p>
                </div>
            </a>
            {% endif %}
            {% empty %}
            <div class="empty-state" style="grid-column:1/-1;">
                <h3 class="empty-state__title">No sales found</h3>
                <p class="empty-state__desc">Check back soon or book your own sale.</p>
                <a href="/#booking" class="btn btn--primary">Book Your Sale</a>
            </div>
            {% endfor %}
        </div>
    </div>
</section>
{% endblock %}