{% extends 'admin/layout.html.twig' %}
{% block title %}Account Transfers - KitscoApp{% endblock %}
{% block page_title %}Account Transfers{% endblock %}

{% block content %}
<div class="mb-4">
    <a href="{{ path('admin_account_index') }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
        <i class="bi bi-arrow-left"></i> Back to Accounts
    </a>
</div>

<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
    <p class="text-sm text-gray-500">{{ transfers|length }} transfer(s)</p>
    <a href="{{ path('admin_account_transfer_new') }}" class="inline-flex items-center gap-1.5 bg-kitsco-accent hover:bg-kitsco-dark text-white font-medium py-2 px-4 rounded-lg transition-colors text-sm">
        <i class="bi bi-plus-circle"></i> New Transfer
    </a>
</div>

<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="overflow-x-auto">
        <table class="w-full text-sm">
            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
                <tr>
                    <th class="px-4 py-3 text-left font-medium">Reference</th>
                    <th class="px-4 py-3 text-left font-medium">Date</th>
                    <th class="px-4 py-3 text-left font-medium">From</th>
                    <th class="px-4 py-3 text-left font-medium">To</th>
                    <th class="px-4 py-3 text-right font-medium">Amount</th>
                    <th class="px-4 py-3 text-right font-medium">Actions</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                {% for transfer in transfers %}
                <tr class="hover:bg-gray-50 transition-colors">
                    <td class="px-4 py-3">
                        <span class="text-xs font-mono text-gray-600">{{ transfer.referenceNumber }}</span>
                        {% if transfer.isReconciled %}
                        <span class="ml-1 inline-block w-2 h-2 rounded-full bg-green-500" title="Reconciled"></span>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-gray-600">{{ transfer.transferDate|date('d M Y') }}</td>
                    <td class="px-4 py-3">
                        <p class="text-gray-800">{{ transfer.fromAccount.name }}</p>
                        <span class="inline-block px-1.5 py-0.5 rounded text-[10px] {{ transfer.fromAccount.type.badgeClass }}">{{ transfer.fromAccount.type.label }}</span>
                    </td>
                    <td class="px-4 py-3">
                        <p class="text-gray-800">{{ transfer.toAccount.name }}</p>
                        <span class="inline-block px-1.5 py-0.5 rounded text-[10px] {{ transfer.toAccount.type.badgeClass }}">{{ transfer.toAccount.type.label }}</span>
                    </td>
                    <td class="px-4 py-3 text-right">
                        <p class="font-semibold text-gray-800">{{ transfer.formattedAmount }}</p>
                        {% if transfer.isCrossCurrency %}
                        <p class="text-xs text-gray-400">→ {{ transfer.formattedToAmount }}</p>
                        {% endif %}
                    </td>
                    <td class="px-4 py-3 text-right">
                        <a href="{{ path('admin_account_transfer_show', {id: transfer.id}) }}" class="inline-flex items-center justify-center w-8 h-8 rounded-lg border border-gray-300 text-gray-500 hover:bg-gray-50" title="View"><i class="bi bi-eye text-sm"></i></a>
                    </td>
                </tr>
                {% else %}
                <tr>
                    <td colspan="6" class="px-4 py-16 text-center">
                        <div class="text-gray-400">
                            <i class="bi bi-arrow-left-right text-4xl"></i>
                            <p class="mt-3 font-medium text-gray-500">No transfers yet</p>
                            <p class="text-sm text-gray-400 mt-1">Transfer money between accounts.</p>
                            <a href="{{ path('admin_account_transfer_new') }}" class="inline-flex items-center gap-1.5 mt-4 bg-kitsco-accent text-white font-medium py-2 px-4 rounded-lg text-sm"><i class="bi bi-plus-circle"></i> New Transfer</a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}