{% extends 'dashboard/base.html' %}
{% block title %}Profile{% endblock %}

{% block content %}
<div class="fluent-card p-6">
    <div class="flex items-center gap-4">
        <div class="w-16 h-16 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center text-white font-medium text-2xl">{{ user.username|first|upper }}</div>
        <div>
            <h2 class="text-headline">{{ user.get_full_name|default:user.username }}</h2>
            <div class="text-caption">{{ user.email }}</div>
        </div>
    </div>

    <hr class="my-4">

    <h3 class="text-subtitle mb-2">Subscription</h3>
    {% if subscription and subscription.active and plan %}
    <div class="text-body">Plan: <strong>{{ plan.name }}</strong> — {{ subscription.requests_this_month }}/{{ limit }} requests used this month.</div>
    {% else %}
    <div class="text-body">You are on the Free plan. <a href="{% url 'billing-subscription' %}">View plans</a></div>
    {% endif %}

    <hr class="my-4">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm">
        <div><span class="text-gray-500">Company:</span> {{ profile.company|default:"-" }}</div>
        <div><span class="text-gray-500">Role:</span> {{ profile.role|default:"-" }}</div>
        <div><span class="text-gray-500">Website:</span> {{ profile.website|default:"-" }}</div>
        <div><span class="text-gray-500">API Keys:</span> {{ active_non_testing_keys }}/{{ api_key_limit }}</div>
    </div>

    <div class="mt-6">
        <a href="{% url 'settings' %}" class="fluent-btn fluent-btn-primary">Edit profile & Settings</a>
        <a href="{% url 'billing-history' %}" class="fluent-btn ml-2">Billing history</a>
    </div>
</div>
<div class="mt-6 fluent-card p-4">
    <h3 class="text-subtitle mb-2">Recent Transactions</h3>
    {% for tx in recent_transactions %}
    <div class="flex justify-between items-center py-2 border-b">
        <div>
            <div class="font-medium">{{ tx.charge_id }}</div>
            <div class="text-small text-gray-600">{{ tx.created_at }}</div>
        </div>
        <div class="text-right">
            <div>{{ tx.amount }} {{ tx.currency }}</div>
            <div class="text-small">{{ tx.status }}</div>
        </div>
    </div>
    {% empty %}
    <div class="text-small text-gray-500 p-3">No transactions yet.</div>
    {% endfor %}
</div>
{% endblock %}