{% extends "base.html" %}
{% block title %}Sync Preview{% endblock %}
{% block page_title %}Sync Preview — {{ ta.account_name }}{% endblock %}

{% block content %}
<div class="pcard mb-3 d-flex justify-content-between align-items-center">
    <div>
        <div style="font-size:14px;font-weight:600;">{{ ta.institution_name }} — {{ ta.account_name }}</div>
        <div style="font-size:12px;color:var(--muted);">
            Mapped to: <strong>{{ ta.pfm_account.name }}</strong> ·
            {{ count }} transaction(s) found
            {% if ta.last_sync_date %}· Last sync: {{ ta.last_sync_date.strftime('%b %d, %Y') }}{% endif %}
        </div>
    </div>
    <div class="d-flex gap-2">
        <a href="{{ url_for('teller.index') }}" class="btn btn-sm btn-outline-secondary" style="font-size:12px;">Cancel</a>
        {% if count > 0 %}
        <form method="POST" action="{{ url_for('teller.sync_confirm') }}">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            <button type="submit" class="btn btn-sm btn-success" style="font-size:12px;">
                <i class="bi bi-check-lg me-1"></i>Import {{ count }} Transaction(s)
            </button>
        </form>
        {% endif %}
    </div>
</div>

{% if preview %}
<div class="pcard p-0">
    <table class="pfm-table">
        <thead>
            <tr>
                <th style="padding-left:20px;">Date</th>
                <th>Description</th>
                <th>Type</th>
                <th>Category</th>
                <th class="text-end" style="padding-right:20px;">Amount</th>
            </tr>
        </thead>
        <tbody>
        {% for txn in preview %}
        <tr>
            <td style="padding-left:20px;font-size:12px;color:var(--muted);white-space:nowrap;">
                {{ txn.date.strftime('%b %d, %Y') }}
            </td>
            <td style="font-size:13px;">{{ txn.description }}</td>
            <td>
                <span class="badge {% if txn.transaction_type == 'income' %}badge-income{% else %}badge-expense{% endif %}" style="font-size:11px;">
                    {{ txn.transaction_type | title }}
                </span>
            </td>
            <td style="font-size:12px;color:var(--muted);">
                {% if txn.category_id %}
                    {% for cat in [txn.category_id] %}
                    {# Look up category name via the category_id #}
                    {{ txn.notes | replace('Teller:', '') }}
                    {% endfor %}
                {% else %}
                <span style="color:#f59e0b;">Uncategorised</span>
                {% endif %}
            </td>
            <td class="text-end mono {% if txn.transaction_type == 'income' %}text-income{% else %}text-expense{% endif %}"
                style="font-size:13px;font-weight:600;padding-right:20px;">
                {% if txn.transaction_type == 'income' %}+{% else %}-{% endif %}{{ txn.amount | currency }}
            </td>
        </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<div class="d-flex justify-content-end mt-3">
    <form method="POST" action="{{ url_for('teller.sync_confirm') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="btn btn-success">
            <i class="bi bi-check-lg me-1"></i>Confirm Import ({{ count }} transactions)
        </button>
    </form>
</div>

{% else %}
<div class="pcard text-center py-5">
    <i class="bi bi-check-circle text-success" style="font-size:3rem;"></i>
    <h5 class="mt-3 mb-1">All up to date</h5>
    <p class="text-muted small">No new transactions found since last sync.</p>
    <a href="{{ url_for('teller.index') }}" class="btn btn-sm btn-outline-secondary">Back</a>
</div>
{% endif %}
{% endblock %}