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

{% block content %}

{% url 'shop_checkout' 'product-purchase' product.token as url_shop_checkout %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-6">
        {{ product.name }}
    </h1>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
        <!-- Product Image -->
        <div>
            <img src="{{ product.get_image_url }}" alt="{{ product.name }}" class="w-full h-64 lg:h-80 object-cover rounded-lg">
        </div>

        <!-- Product Details -->
        <div>
            <div class="mb-4 pb-4 border-b border-base-300">
                <p class="text-sm text-base-content/60 mb-1">{% trans "model.field.price" %}</p>
                <p class="text-3xl font-bold text-primary">{{ product.price|format_currency:product.currency }}</p>
            </div>

            {% if user.is_authenticated %}
            <a href="{{ url_shop_checkout }}" class="btn btn-primary w-full">
                <i class="fa-solid fa-cart-shopping mr-2"></i>{% trans "button.buy-now" %}
            </a>
            {% else %}
            <a href="{% url 'account_login' %}?next={{ request.get_full_path|urlencode }}" class="btn btn-primary w-full">
                <i class="fa-solid fa-user mr-2"></i>{% trans "button.buy-now" %}
            </a>
            {% endif %}
        </div>
    </div>

    <!-- Product Description -->
    {% if product.description %}
    <div class="mb-6">
        <h2 class="font-semibold mb-3">
            <i class="fa-solid fa-file-lines mr-2"></i>{% trans "model.field.description" %}
        </h2>
        <div class="prose max-w-none">
            {{ product.description|safe }}
        </div>
    </div>
    {% endif %}

    <!-- Product Files Section -->
    {% if product_files %}
    <div>
        <h2 class="font-semibold mb-3">
            <i class="fa-solid fa-folder-open mr-2"></i>{% trans "title.shop-product-files" %}
        </h2>

        <div class="space-y-3">
            {% for file in product_files %}
            <div class="flex items-center justify-between bg-base-200 rounded-lg p-3">
                <div class="flex items-center gap-3">
                    <img src="{% static 'images/file.png' %}" alt="File" class="w-10">
                    <div>
                        <p class="font-semibold">{{ file.name }}</p>
                        {% if file.description %}
                        <p class="text-sm text-base-content/60">{{ file.description }}</p>
                        {% endif %}
                        <div class="flex items-center gap-2 mt-1">
                            {% if file.file_type %}
                            <span class="badge badge-sm">{{ file.file_type }}</span>
                            {% endif %}
                            {% if file.file_size %}
                            <span class="text-xs text-base-content/50">{{ file.file_size|filesizeformat }}</span>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <div>
                    {% if user.is_authenticated %}
                        {% has_purchased_product user.customer product.id as has_purchased %}
                        {% if has_purchased %}
                        <a href="{{ file.get_file_url }}" class="btn btn-outline btn-primary btn-sm">
                            <i class="fa-solid fa-download mr-1"></i>{% trans "button.download" %}
                        </a>
                        {% else %}
                        <button class="btn btn-outline btn-sm" disabled>
                            <i class="fa-solid fa-lock mr-1"></i>{% trans "button.purchase-to-download" %}
                        </button>
                        {% endif %}
                    {% else %}
                    <a href="{% url 'account_login' %}?next={{ request.get_full_path|urlencode }}" class="btn btn-outline btn-primary btn-sm">
                        <i class="fa-solid fa-user mr-1"></i>{% trans "button.buy-now" %}
                    </a>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}
</div>

{% endblock content %}