{% extends "base.html" %}
{% block title %}行业知识 - 本地贷款CRM{% endblock %}
{% block header_title %}行业知识库{% endblock %}
{% block content %}

<div class="flex items-center justify-between mb-4">
    <p class="text-sm text-gray-500">记录各行业的用款周期、旺季淡季、风险因素等知识，辅助客户筛选和产品匹配。</p>
    <button onclick="document.getElementById('new-form').classList.toggle('hidden')"
            class="text-sm px-3 py-1.5 bg-primary text-white rounded-lg hover:bg-blue-700 flex-shrink-0 ml-4">
        + 添加行业
    </button>
</div>

<!-- New industry form -->
<form id="new-form" method="POST" action="/industries/new" class="hidden mb-4 p-4 bg-gray-50 rounded-lg border">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
        <div>
            <label class="text-xs text-gray-500">行业名称 <span class="text-danger">*</span></label>
            <input name="name" required class="w-full border rounded-lg px-3 py-2 text-sm" placeholder="如：餐饮、建筑、制造">
        </div>
        <div>
            <label class="text-xs text-gray-500">平均贷款金额（万）</label>
            <input name="avg_loan_amount" type="number" step="0.1" class="w-full border rounded-lg px-3 py-2 text-sm">
        </div>
        <div>
            <label class="text-xs text-gray-500">用款周期</label>
            <input name="capital_cycle" class="w-full border rounded-lg px-3 py-2 text-sm" placeholder="如：3-6个月">
        </div>
        <div>
            <label class="text-xs text-gray-500">旺季</label>
            <input name="peak_season" class="w-full border rounded-lg px-3 py-2 text-sm" placeholder="如：春节前后">
        </div>
        <div>
            <label class="text-xs text-gray-500">淡季</label>
            <input name="off_season" class="w-full border rounded-lg px-3 py-2 text-sm" placeholder="如：夏季">
        </div>
        <div class="md:col-span-2">
            <label class="text-xs text-gray-500">行业描述</label>
            <textarea name="description" rows="2" class="w-full border rounded-lg px-3 py-2 text-sm"></textarea>
        </div>
        <div class="md:col-span-2">
            <label class="text-xs text-gray-500">风险因素</label>
            <textarea name="risk_factors" rows="2" class="w-full border rounded-lg px-3 py-2 text-sm"></textarea>
        </div>
        <div class="md:col-span-2">
            <label class="text-xs text-gray-500">行业痛点</label>
            <textarea name="pain_points" rows="2" class="w-full border rounded-lg px-3 py-2 text-sm"></textarea>
        </div>
        <div class="md:col-span-2">
            <label class="text-xs text-gray-500">备注</label>
            <textarea name="notes" rows="2" class="w-full border rounded-lg px-3 py-2 text-sm"></textarea>
        </div>
    </div>
    <div class="mt-3 pb-16 md:pb-0">
        <button type="submit" class="text-sm px-4 py-1.5 bg-primary text-white rounded-lg">创建</button>
        <button type="button" onclick="this.form.classList.add('hidden')" class="ml-2 text-sm px-4 py-1.5 border rounded-lg">取消</button>
    </div>
</form>

<!-- Industry grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {% for ind in industries %}
    <a href="/industries/{{ ind.id }}"
       class="block bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md hover:border-primary/30 transition-all">
        <h3 class="font-semibold text-gray-900 mb-1">{{ ind.name }}</h3>
        {% if ind.description %}
        <p class="text-xs text-gray-500 line-clamp-2 mb-2">{{ ind.description }}</p>
        {% endif %}
        <div class="flex flex-wrap gap-1.5 text-[10px]">
            {% if ind.capital_cycle %}
            <span class="px-1.5 py-0.5 bg-blue-50 text-blue-600 rounded">周期: {{ ind.capital_cycle }}</span>
            {% endif %}
            {% if ind.peak_season %}
            <span class="px-1.5 py-0.5 bg-green-50 text-green-600 rounded">旺季: {{ ind.peak_season }}</span>
            {% endif %}
            {% if ind.risk_factors %}
            <span class="px-1.5 py-0.5 bg-red-50 text-red-600 rounded">有风险因素</span>
            {% endif %}
        </div>
    </a>
    {% endfor %}
</div>

{% if not industries %}
<div class="text-center py-12 text-gray-400">
    <p class="text-5xl mb-3">🏭</p>
    <p class="text-sm">暂无行业知识数据</p>
    <p class="text-xs mt-1">点击上方按钮添加第一个行业</p>
</div>
{% endif %}

{% endblock %}