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

{% load i18n %}
{% load pyaa %}

{% 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-credits" %}
    </h1>

    {% if page_obj %}
    <div class="space-y-4">
        {% for credit 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="{{ credit.get_image_url }}" alt="">
                    </div>
                </div>
                <div class="flex-1 min-w-0">
                    <h3 class="font-semibold">{{ credit.get_description }}</h3>
                    <p class="text-sm">
                        <span class="font-semibold text-base-content/70">{% translate "model.field.created-at" %}:</span>
                        <span>{{ credit.created_at }}</span>
                    </p>
                    <p class="text-sm">
                        <span class="font-semibold text-base-content/70">{% translate "model.field.amount" %}:</span>
                        {% if credit.amount > 0 %}
                        <span class="badge badge-sm badge-success">+{{ credit.amount }}</span>
                        {% else %}
                        <span class="badge badge-sm badge-error">{{ credit.amount }}</span>
                        {% endif %}
                    </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 %}