{% extends "base.html" %}
{% load static i18n %}

{% block title %}{{ portfolio.name }} - Transactions{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="{% url 'invest-dashboard' %}" class="text-gray-500 hover:text-gray-700 text-sm">
        <i class="fas fa-arrow-left mr-1"></i> Back to Dashboard
    </a>
</div>

<div class="bg-white rounded-xl shadow overflow-hidden">
    <!-- Header -->
    <div class="bg-gray-900 px-6 py-4 flex items-center justify-between">
        <div>
            <h1 class="text-white text-2xl font-bold">{{ portfolio.name }}</h1>
            <p class="text-gray-400 text-sm mt-1">Transaction History</p>
        </div>
        <a href="{% url 'invest-portfolio-detail' portfolio.id %}" class="text-gray-400 hover:text-white text-sm">
            View Portfolio <i class="fas fa-chevron-right ml-1"></i>
        </a>
    </div>

    {% if transactions %}
    <div class="px-6 py-4">
        <table class="w-full text-sm">
            <thead>
                <tr class="text-xs text-stone-400 font-semibold tracking-widest uppercase border-b border-stone-100">
                    <th class="pb-3 text-left">Date</th>
                    <th class="pb-3 text-left">Action</th>
                    <th class="pb-3 text-left">Stock</th>
                    <th class="pb-3 text-right">Quantity</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-stone-50">
                {% for tx in transactions %}
                <tr class="hover:bg-stone-50">
                    <td class="py-3 text-stone-500">{{ tx.date|date:"Y-m-d" }}</td>
                    <td class="py-3">
                        <span class="{% if tx.action == 'BUY' %}text-green-700{% else %}text-red-600{% endif %} font-medium">
                            {{ tx.action }}
                        </span>
                    </td>
                    <td class="py-3 font-semibold text-stone-900">{{ tx.stock_code }}</td>
                    <td class="py-3 text-right text-stone-600">{{ tx.quantity|floatformat:2 }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    <div class="px-6 py-12 text-center">
        <p class="text-gray-500">No transactions in this portfolio.</p>
    </div>
    {% endif %}
</div>
{% endblock %}