{% extends "base.html" %}
{% block title %}标签管理 - 本地贷款CRM{% endblock %}
{% block header_title %}标签管理{% endblock %}
{% block content %}

<div x-data="{showForm: false, editId: null}">

    <div class="flex items-center justify-between mb-4">
        <h2 class="font-semibold text-gray-900">全部标签</h2>
        <button @click="showForm = !showForm; editId = null" class="px-4 py-2 bg-primary text-white text-sm rounded-lg hover:bg-blue-700">+ 新建标签</button>
    </div>

    <!-- New/Edit form -->
    <div x-show="showForm" x-transition class="bg-white rounded-xl shadow-sm border border-gray-100 p-4 mb-4">
        <form method="POST" :action="editId ? '/tags/'+editId+'/edit' : '/tags/create'">
            <div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
                <div>
                    <label class="block text-xs text-gray-500 mb-1">标签名</label>
                    <input type="text" name="name" required class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">分类</label>
                    <select name="category" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
                        <option value="来源">来源</option>
                        <option value="阶段">阶段</option>
                        <option value="资质">资质</option>
                        <option value="偏好">偏好</option>
                        <option value="行为">行为</option>
                        <option value="风险">风险</option>
                        <option value="行业">行业</option>
                        <option value="贷后">贷后</option>
                        <option value="预判">预判</option>
                        <option value="同步">同步</option>
                    </select>
                </div>
                <div>
                    <label class="block text-xs text-gray-500 mb-1">颜色</label>
                    <input type="color" name="color" value="#6B7280" class="w-full h-10 border border-gray-300 rounded-lg">
                </div>
            </div>
            <div class="mt-3">
                <label class="block text-xs text-gray-500 mb-1">说明（可选）</label>
                <input type="text" name="description" class="w-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-primary/30">
            </div>
            <div class="mt-4 flex gap-2">
                <button type="submit" class="px-4 py-2 bg-primary text-white text-sm rounded-lg">保存</button>
                <button type="button" @click="showForm = false" class="px-4 py-2 border border-gray-300 text-sm rounded-lg text-gray-600">取消</button>
            </div>
        </form>
    </div>

    <!-- Tags by category -->
    <div class="space-y-6">
        {% for cat, tlist in tags_by_cat.items() %}
        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-4">
            <h3 class="font-medium text-gray-900 mb-3">{{ cat }} <span class="text-xs text-gray-400 ml-1">({{ tlist|length }})</span></h3>
            <div class="flex flex-wrap gap-2">
                {% for t in tlist %}
                <div class="inline-flex items-center gap-1.5 text-xs px-2.5 py-1.5 rounded-full border" style="border-color:{{ t.color }}40; background:{{ t.color }}10">
                    <span class="w-2 h-2 rounded-full" style="background:{{ t.color }}"></span>
                    {{ t.name }}
                    <form method="POST" action="/tags/{{ t.id }}/delete" class="inline">
                        <button type="submit" class="text-gray-400 hover:text-danger ml-0.5" title="删除" onclick="return confirm('确定删除标签「{{ t.name }}」？')">&times;</button>
                    </form>
                </div>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}