{% extends "base.html" %}
{% block title %}利率敏感客户 - 本地贷款CRM{% endblock %}
{% block header_title %}利率敏感客户匹配{% endblock %}
{% block content %}

<div class="flex items-center gap-2 mb-4">
    <a href="/products" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600">产品列表</a>
    <a href="/products/match" class="text-sm px-3 py-1.5 rounded-lg bg-gray-100 text-gray-600">客户匹配</a>
    <a href="/products/rate-sensitive" class="text-sm px-3 py-1.5 rounded-lg bg-gray-900 text-white">利率敏感</a>
</div>

<div class="mb-4 text-sm text-gray-500">
    筛选利率 ≤ <span class="font-bold">{{ threshold }}%</span> 的产品，匹配所有标注了"利率敏感"标签的客户
</div>

{% if results %}
<div class="space-y-4">
    {% for r in results %}
    <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-3">
            <a href="/customers/{{ r.customer.id }}" class="font-medium text-sm text-primary hover:underline">{{ r.customer.name }}</a>
            <span class="text-xs px-2 py-0.5 rounded-full bg-orange-100 text-orange-700">利率敏感</span>
        </div>
        <div class="flex flex-wrap gap-2">
            {% for p in r.products %}
            <div class="border border-green-200 bg-green-50 rounded-lg px-3 py-2">
                <span class="text-sm font-medium text-green-800">{{ p.name }}</span>
                <span class="text-xs text-green-600 ml-2">{{ p.rate_min }}%-{{ p.rate_max }}%</span>
                <span class="text-xs text-green-600 ml-2">{{ p.amount_min }}-{{ p.amount_max }}万</span>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% else %}
<div class="text-center py-16">
    <p class="text-4xl mb-4">📉</p>
    <p class="text-gray-400">暂无利率敏感客户或匹配的低利率产品</p>
    <p class="text-xs text-gray-400 mt-1">在客户画像中将"利率敏感度"设为"高"，并添加低利率产品</p>
</div>
{% endif %}

{% endblock %}