{% extends 'layouts/base.html' %}
{% load i18n %}
{% load pyaa %}
{% load pyaa_format %}

{% block content %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-6">
        {% if plan_type == 'credit-purchase' %}
            {% translate "title.shop.plans.credit-purchase" %}
        {% else %}
            {% translate "title.shop.plans" %}
        {% endif %}
    </h1>

    {% if plans %}
    <div class="flex flex-wrap justify-center gap-6">
        {% for plan in plans %}
        <div class="w-full max-w-sm bg-base-200 rounded-lg p-6 {% if plan.featured %}ring-2 ring-primary{% endif %}">
            {% if plan.get_image_url %}
            <a href="{% if plan.plan_type == 'subscription' %}{% url 'shop_checkout' 'subscription' plan.token %}{% else %}{% url 'shop_checkout' 'credit-purchase' plan.token %}{% endif %}">
                <img src="{{ plan.get_image_url }}" alt="{{ plan.get_name }}" class="w-full aspect-[16/9] object-cover rounded-lg mb-4">
            </a>
            {% endif %}

            <div class="text-center">
                <h2 class="text-xl font-bold mb-2">{{ plan.get_name }}</h2>
                <p class="text-3xl font-bold text-primary mb-4">{{ plan.price|format_currency:plan.currency }}</p>
            </div>

            {% if plan.description %}
            <div class="text-center text-base-content/70 mb-4">
                {{ plan.description|safe }}
            </div>
            {% endif %}

            <div class="text-center">
                {% if plan.plan_type == 'subscription' %}
                <a href="{% url 'shop_checkout' 'subscription' plan.token %}" class="btn btn-primary w-full">
                    {% trans "button.shop-select-subscription-plan" %}
                </a>
                {% else %}
                <a href="{% url 'shop_checkout' 'credit-purchase' plan.token %}" class="btn btn-primary w-full">
                    {% trans "button.shop-select-credit-plan" %}
                </a>
                {% endif %}
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    {% include 'partials/empty_data.html' %}
    {% endif %}
</div>

{% endblock content %}