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

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

{% block content %}

{% url 'account_update_profile' as url_account_update_profile %}
{% url 'account_update_avatar' as url_account_update_avatar %}
{% url 'account_update_address' as url_account_update_address %}
{% url 'account_change_password' as url_account_change_password %}
{% url 'account_delete' as url_account_delete %}
{% url 'account_logout' as url_account_logout %}
{% url 'account_subscriptions' as url_account_subscriptions %}
{% url 'account_credits' as url_account_credits %}
{% url 'account_credit_purchases' as url_account_credit_purchases %}
{% url 'account_product_purchases' as url_account_product_purchases %}

<div class="container mx-auto px-4 py-8">
    <h1 class="text-2xl font-bold text-center mb-2">
        {% translate "title.account-profile" %}
    </h1>
    <p class="text-center text-base-content/70 mb-8">
        {% translate "subtitle.my-account" %}
    </p>

    <!-- Profile Info -->
    <div class="flex items-center gap-4 mb-8">
        {% include 'partials/customer_avatar.html' %}
        <div>
            <h2 class="font-semibold text-lg">{{ user.get_full_name|default:user.username }}</h2>
            {% with user.customer.credits as credits %}
            <p class="text-base-content/70">
                {% if credits > 0 %}
                    {% translate "customer.credits" %}: <span class="badge badge-primary">{{ credits }}</span>
                {% else %}
                    {% translate "customer.no-credits" %}
                {% endif %}
            </p>
            {% endwith %}
        </div>
    </div>

    <!-- My Purchases -->
    <h3 class="font-semibold mb-3">{% translate "subtitle.my-purchases" %}</h3>
    <div class="flex flex-col gap-3 mb-8">
        <a href="{{ url_account_product_purchases }}" class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-bag-shopping"></i>
            {% translate "button.account-product-purchases" %}
        </a>
        <a href="{{ url_account_credits }}" class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-coins"></i>
            {% translate "button.account-credits" %}
        </a>
        <a href="{{ url_account_credit_purchases }}" class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-cart-shopping"></i>
            {% translate "button.account-credit-purchases" %}
        </a>
        <a href="{{ url_account_subscriptions }}" class="btn btn-outline w-full justify-start">
            <i class="fa-solid fa-calendar-check"></i>
            {% translate "button.account-subscriptions" %}
        </a>
    </div>

    <!-- Account Settings -->
    <h3 class="font-semibold mb-3">{% translate "subtitle.account-settings" %}</h3>
    <div class="flex flex-col gap-3 mb-8">
        <a href="{{ url_account_update_profile }}" class="btn btn-ghost bg-base-200 justify-start">
            <i class="fa-solid fa-user text-primary"></i>
            {% translate "button.update-profile" %}
        </a>
        <a href="{{ url_account_change_password }}" class="btn btn-ghost bg-base-200 justify-start">
            <i class="fa-solid fa-shield-halved text-primary"></i>
            {% translate "button.change-password" %}
        </a>
        <a href="{{ url_account_update_avatar }}" class="btn btn-ghost bg-base-200 justify-start">
            <i class="fa-solid fa-image text-primary"></i>
            {% translate "button.update-avatar" %}
        </a>
        <a href="{{ url_account_update_address }}" class="btn btn-ghost bg-base-200 justify-start">
            <i class="fa-solid fa-location-dot text-primary"></i>
            {% translate "button.update-address" %}
        </a>
    </div>

    <!-- Danger Zone -->
    <h3 class="font-semibold text-error mb-3">{% translate "subtitle.danger-zone" %}</h3>
    <div class="flex flex-col gap-3">
        <a href="{{ url_account_delete }}" class="btn btn-ghost bg-base-200 justify-start text-error">
            <i class="fa-solid fa-trash"></i>
            {% translate "button.account-delete" %}
        </a>
        <a href="{{ url_account_logout }}" class="btn btn-ghost bg-base-200 justify-start text-error">
            <i class="fa-solid fa-right-from-bracket"></i>
            {% translate "button.account-logout" %}
        </a>
    </div>
</div>

{% endblock content %}