{% extends "base.html" %}
{% block title %}贷款申请 - 本地贷款CRM{% endblock %}
{% block header_title %}贷款申请 ({{ total }}){% endblock %}
{% block content %}

<div class="flex flex-wrap gap-2 mb-4">
    <a href="/applications?stage=" class="text-xs px-3 py-1.5 rounded-full {% if not stage %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">全部</a>
    {% for s in stages %}
    <a href="/applications?stage={{ s }}" class="text-xs px-3 py-1.5 rounded-full {% if stage == s %}bg-gray-900 text-white{% else %}bg-gray-100 text-gray-600{% endif %}">{{ s }}</a>
    {% endfor %}
</div>

{% if applications %}
<!-- Mobile cards -->
<div class="md:hidden space-y-3">
    {% for a in applications %}
    <a href="/applications/{{ a.id }}" class="block bg-white rounded-xl shadow-sm border border-gray-100 p-4">
        <div class="flex items-center justify-between mb-2">
            <span class="font-semibold text-gray-900">{{ a.customer_name }}</span>
            <span class="text-xs px-2 py-0.5 rounded-full {% if a.result == '已放款' %}bg-green-100 text-green-700{% elif a.result == '已拒绝' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %}">{{ a.result or '进行中' }}</span>
        </div>
        <div class="text-xs text-gray-500 space-y-0.5">
            <div>阶段: {{ a.current_stage }} · 金额: {{ (a.amount|string + '万') if a.amount else '-' }}</div>
            {% if a.rejection_name %}<div class="text-red-500">拒绝: {{ a.rejection_name }}</div>{% endif %}
            <div>{{ a.created_at[:10] if a.created_at else '' }}</div>
        </div>
    </a>
    {% endfor %}
</div>

<!-- Desktop table -->
<div class="hidden md:block bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="bg-gray-50 text-gray-600">
            <tr>
                <th class="text-left px-4 py-3 font-medium">客户</th>
                <th class="text-left px-4 py-3 font-medium">产品</th>
                <th class="text-left px-4 py-3 font-medium">金额</th>
                <th class="text-left px-4 py-3 font-medium">阶段</th>
                <th class="text-left px-4 py-3 font-medium">结果</th>
                <th class="text-left px-4 py-3 font-medium hidden lg:table-cell">拒绝原因</th>
                <th class="text-left px-4 py-3 font-medium hidden xl:table-cell">创建时间</th>
            </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
            {% for a in applications %}
            <tr class="hover:bg-gray-50 cursor-pointer" onclick="window.location='/applications/{{ a.id }}'">
                <td class="px-4 py-3 font-medium text-primary">{{ a.customer_name }}</td>
                <td class="px-4 py-3 text-gray-600">{{ a.product_name or '-' }}</td>
                <td class="px-4 py-3 text-gray-600">{{ (a.amount|string + '万') if a.amount else '-' }}</td>
                <td class="px-4 py-3"><span class="text-xs px-2 py-0.5 rounded-full bg-gray-100">{{ a.current_stage }}</span></td>
                <td class="px-4 py-3">
                    <span class="text-xs px-2 py-0.5 rounded-full {% if a.result == '已放款' %}bg-green-100 text-green-700{% elif a.result == '已拒绝' %}bg-red-100 text-red-700{% else %}bg-blue-100 text-blue-700{% endif %}">{{ a.result or '进行中' }}</span>
                </td>
                <td class="px-4 py-3 text-gray-600 hidden lg:table-cell text-xs">{{ a.rejection_name or '-' }}</td>
                <td class="px-4 py-3 text-gray-600 hidden xl:table-cell">{{ a.created_at[:10] if a.created_at else '' }}</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
<div class="text-center py-16">
    <p class="text-4xl mb-4">📋</p>
    <p class="text-gray-400">暂无贷款申请</p>
</div>
{% endif %}

{% endblock %}