<!-- templates/subscriptions/monthly_summary.html -->
{% extends "subscriptions/base.html" %}

{% block title %}Monthly Offer Summary{% endblock %}

{% block content %}
<div class="max-w-5xl mx-auto">
    <h1 class="text-3xl font-bold text-gray-800 mb-6">Monthly Offer Summary</h1>

    {% if monthly_offers %}
        {% for month_data in monthly_offers %}
            <div class="bg-white rounded-lg shadow-md mb-6 overflow-hidden">
                <div class="bg-blue-500 text-white px-6 py-3">
                    <h3 class="text-xl font-semibold">{{ month_data.month|date:"F Y" }}</h3>
                </div>
                <div class="p-4">
                    <ul class="divide-y divide-gray-200">
                        {% for offer in month_data.offers %}
                            <li class="py-3 flex justify-between items-center">
                                <a href="{% url 'offer_detail' month_data.month|date:'Y' month_data.month|date:'m' offer.offerIdentifier %}"
                                   class="text-blue-600 hover:text-blue-800 hover:underline">
                                    {{ offer.offerIdentifier }}
                                </a>
                                <span class="bg-blue-100 text-blue-800 text-sm font-medium px-3 py-1 rounded-full">
                                    {{ offer.count }}
                                </span>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        {% endfor %}
    {% else %}
        <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-700 p-4" role="alert">
            <p>No offers available.</p>
        </div>
    {% endif %}
</div>
{% endblock %}
