{% extends "base.html" %}
{% block title %}Map Plaid Accounts{% endblock %}
{% block page_title %}Map Accounts — {{ item.institution_name }}{% endblock %}

{% block content %}
<form method="POST">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">

<div class="pcard mb-3">
    <div class="pcard-title mb-1">{{ item.institution_name }}</div>
    <div style="font-size:12px;color:var(--muted);">
        Map each Plaid account to a PFM account, or create a new one automatically.
        Accounts left unmapped will be skipped during sync.
    </div>
</div>

{% for pa in plaid_accounts %}
<div class="pcard mb-3">
    <div class="d-flex align-items-start gap-3 flex-wrap">
        <div style="flex:1;min-width:180px;">
            <div style="font-size:14px;font-weight:600;">{{ pa.display_name }}</div>
            <div style="font-size:11px;color:var(--muted);">
                {{ pa.account_type | title }} · {{ pa.account_subtype | replace('_',' ') | title }}
            </div>
        </div>
        <div style="flex:2;min-width:240px;">
            <label style="font-size:12px;color:var(--muted);display:block;margin-bottom:4px;">Map to PFM Account</label>
            <select name="pfm_account_{{ pa.id }}" class="form-select form-select-sm">
                <option value="">— Skip this account —</option>
                <option value="new">✦ Create new PFM account</option>
                <optgroup label="Existing Accounts">
                {% for a in pfm_accounts %}
                <option value="{{ a.id }}"
                    {% if pa.pfm_account_id == a.id %}selected{% endif %}>
                    {{ a.name }} ({{ a.account_type | replace('_',' ') | title }})
                </option>
                {% endfor %}
                </optgroup>
            </select>
        </div>
    </div>
</div>
{% endfor %}

<div class="d-flex gap-2 justify-content-end">
    <a href="{{ url_for('plaid.index') }}" class="btn btn-outline-secondary">Cancel</a>
    <button type="submit" class="btn btn-primary">
        <i class="bi bi-check-lg me-1"></i>Save Mapping
    </button>
</div>
</form>
{% endblock %}