{% extends 'layouts/base.html' %}

{% load i18n %}
{% load pyaa %}
{% load pyaa_format %}
{% load pyaa_status %}

{% block content %}

{% url 'account_profile' as url_account_profile %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-6">
        {% translate "title.account-credit-purchases" %}
    </h1>

    {% if page_obj %}
    <div class="space-y-4">
        {% for purchase in page_obj %}
        <div class="bg-base-200 rounded-lg p-4">
            <div class="flex items-start gap-4">
                <div class="avatar flex-shrink-0">
                    <div class="w-20 h-12 rounded">
                        <img src="{{ purchase.plan.get_image_url }}" alt="{{ purchase.plan.name }}">
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold">{{ purchase.plan.name }}</h3>
                    <p class="text-sm">
                        <span class="font-semibold text-base-content/70">{% translate "model.field.price" %}:</span>
                        <span>{{ purchase.price|format_currency:purchase.currency }}</span>
                    </p>
                    <p class="text-sm">
                        <span class="font-semibold text-base-content/70">{% translate "model.field.created-at" %}:</span>
                        <span>{{ purchase.created_at }}</span>
                    </p>
                    <p class="text-sm">
                        <span class="font-semibold text-base-content/70">{% translate "model.field.status" %}:</span>
                        <span class="badge badge-sm" style="background-color: {{ purchase.status|status_bg_color_hex }}; color: {{ purchase.status|status_text_color_hex }};">
                            {{ purchase.get_status_display }}
                        </span>
                    </p>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    {% include 'partials/paginator.html' %}
    {% else %}
    {% include 'partials/empty_data.html' %}
    {% endif %}

    <div class="text-center mt-6">
        <a href="{{ url_account_profile }}" class="btn btn-ghost">
            {% translate "button.back" %}
        </a>
    </div>
</div>

{% endblock content %}