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

{% block content %}
<div class="flex flex-wrap justify-between items-center gap-4 mb-6">
    <div>
        <p class="text-sm text-gray-500">{{ accounts|length }} account(s)</p>
        <p class="text-lg font-semibold text-gray-800">Total Balance: Shs {{ totalBalance|money }}</p>
    </div>
    <div class="flex items-center gap-2">
        <a href="{{ path('admin_account_transfer_index') }}" class="inline-flex items-center gap-1.5 bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 font-medium py-2 px-4 rounded-lg transition-colors text-sm">
            <i class="bi bi-arrow-left-right"></i> Transfers
        </a>
        <a href="{{ path('admin_account_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> Add Account
        </a>
    </div>
</div>

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 mb-6">
    {% for account in accounts %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-5 hover:shadow-md transition-shadow">
        <div class="flex justify-between items-start mb-3">
            <div>
                <h3 class="font-semibold text-gray-800">{{ account.name }}</h3>
                <span class="inline-block px-2 py-0.5 rounded bg-gray-100 text-gray-600 text-xs font-mono">{{ account.code }}</span>
            </div>
            <span class="inline-block px-2 py-0.5 rounded-full text-xs font-medium {{ account.type.badgeClass }}">
                {{ account.type.label }}
            </span>
        </div>

        {% if account.bankName %}
        <p class="text-sm text-gray-500 mb-1">{{ account.bankName }}</p>
        {% endif %}
        {% if account.accountNumber %}
        <p class="text-xs text-gray-400 mb-2">Acct: {{ account.accountNumber }}</p>
        {% endif %}

        <div class="mt-4 pt-3 border-t border-gray-100">
            <p class="text-xs text-gray-400">Current Balance</p>
            <p class="text-xl font-bold {{ account.currentBalance|number_format(0) >= 0 ? 'text-green-600' : 'text-red-600' }}">
                {{ account.formattedBalance }}
            </p>
        </div>

        <div class="mt-4 flex items-center gap-2">
            <a href="{{ path('admin_account_show', {id: account.id}) }}" class="inline-flex items-center gap-1 text-sm text-kitsco-accent hover:text-kitsco-dark">
                <i class="bi bi-eye"></i> View
            </a>
            <a href="{{ path('admin_account_edit', {id: account.id}) }}" class="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
                <i class="bi bi-pencil"></i> Edit
            </a>
            {% if account.isDefault %}
            <span class="ml-auto inline-block px-2 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-700">Default</span>
            {% endif %}
        </div>
    </div>
    {% else %}
    <div class="col-span-full bg-white rounded-xl shadow-sm border border-gray-100 p-16 text-center">
        <div class="text-gray-400">
            <i class="bi bi-wallet2 text-4xl"></i>
            <p class="mt-3 font-medium text-gray-500">No accounts yet</p>
            <p class="text-sm text-gray-400 mt-1">Add your first account to start tracking cash flow.</p>
            <a href="{{ path('admin_account_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> Add Account</a>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}