{% extends "base.html" %}

{% block content %}
<!-- 页面标题 -->
<div class="w-full max-w-6xl mx-auto p-6">
    <div class="relative flex items-center justify-center py-8">
        <div class="absolute left-0 right-0 h-1 bg-gradient-to-r from-transparent via-violet-500 to-transparent"></div>
        <div class="relative z-10 bg-gradient-to-r from-violet-600 to-purple-700 text-white px-8 py-3 rounded-full shadow-lg">
            <h1 class="text-xl font-bold flex items-center gap-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
                </svg>
                视频设备终端列表
            </h1>
        </div>
    </div>
</div>

<div class="w-full max-w-6xl mx-auto p-6">
    <!-- 筛选表单 -->
    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100 mb-6">
        <div class="px-6 py-4 bg-gradient-to-r from-violet-600 via-violet-700 to-purple-700">
            <h2 class="text-lg font-bold text-white flex items-center gap-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                </svg>
                筛选条件
            </h2>
        </div>
        <div class="p-6">
            <form method="GET" class="flex flex-wrap gap-4 items-end">
                <!-- 分支机构筛选 -->
                <div class="flex flex-col w-full md:w-1/3">
                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                        分支机构
                    </label>
                    <div x-data="{ open: false, search: '{{ selected_branch_name|default:'' }}', selectedId: '{{ selected_branch|default:'' }}', branches: [{% for branch in branches %}{id: {{ branch.id }}, name: '{{ branch.name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
                        <input type="text" 
                               x-model="search"
                               @focus="open = true"
                               @input.debounce.300ms="open = true"
                               @click.away="open = false"
                               placeholder="搜索分支机构..."
                               class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
                               x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
                        >
                        <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                            <div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部分支机构</div>
                            <div x-for="branch in branches.filter(b => b.name.toLowerCase().includes(search.toLowerCase()))"
                                 :key="branch.id"
                                 @click="selectedId = branch.id; search = branch.name; open = false"
                                 class="p-2 hover:bg-violet-50 cursor-pointer"
                                 x-text="branch.name"
                            ></div>
                        </div>
                        <input type="hidden" name="branch" x-model="selectedId">
                    </div>
                </div>

                <!-- 设备类型筛选 -->
                <div class="flex flex-col w-full md:w-1/3">
                    <label class="text-sm font-medium text-gray-700 mb-2 flex items-center gap-1">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                        </svg>
                        设备类型
                    </label>
                    <div x-data="{ open: false, search: '{{ selected_type_name|default:'' }}', selectedCode: '{{ selected_type|default:'' }}', types: [{% for type_code, type_name in terminal_types %}{code: '{{ type_code }}', name: '{{ type_name }}'}{% if not forloop.last %},{% endif %}{% endfor %}] }" class="relative">
                        <input type="text" 
                               x-model="search"
                               @focus="open = true"
                               @input.debounce.300ms="open = true"
                               @click.away="open = false"
                               placeholder="搜索设备类型..."
                               class="w-full p-2.5 border border-gray-200 rounded-lg focus:ring-2 focus:ring-violet-300 focus:border-violet-500 outline-none text-sm bg-gray-50 hover:bg-white transition-colors"
                               x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
                        >
                        <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border border-gray-100 rounded-lg shadow-lg max-h-60 overflow-y-auto">
                            <div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-violet-50 cursor-pointer">全部类型</div>
                            <div x-for="type in types.filter(t => t.name.toLowerCase().includes(search.toLowerCase()))"
                                 :key="type.code"
                                 @click="selectedCode = type.code; search = type.name; open = false"
                                 class="p-2 hover:bg-violet-50 cursor-pointer"
                                 x-text="type.name"
                            ></div>
                        </div>
                        <input type="hidden" name="type" x-model="selectedCode">
                    </div>
                </div>

                <div class="flex items-end">
                    <button type="submit" class="px-5 py-2.5 bg-gradient-to-r from-violet-600 to-violet-700 hover:from-violet-700 hover:to-violet-800 text-white rounded-lg shadow-md hover:shadow-lg transition-all duration-200 font-medium flex items-center gap-2">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z" />
                        </svg>
                        筛选
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- 终端列表表格 -->
    <div class="bg-white rounded-2xl shadow-lg overflow-hidden border border-violet-100">
        <div class="overflow-x-auto">
            <table class="w-full border-collapse">
                <thead>
                    <tr class="bg-gradient-to-r from-violet-50 to-purple-50 border-b-2 border-violet-200">
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                                </svg>
                                分支机构
                            </div>
                        </th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
                                </svg>
                                设备类型
                            </div>
                        </th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                设备描述
                            </div>
                        </th>
                        <th class="px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider">
                            <div class="flex items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-violet-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                创建时间
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-100">
                    {% for terminal in terminals %}
                    <tr class="{% cycle 'bg-white' 'bg-violet-50/30' %} hover:bg-violet-50/50 transition-colors duration-200">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 font-medium">{{ terminal.branch.name }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">
                            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-violet-100 text-violet-700">
                                {{ terminal.get_terminal_type_display }}
                            </span>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600">{{ terminal.description|default:"-" }}</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="4" class="px-6 py-8 text-center text-gray-500">
                            <div class="flex flex-col items-center gap-2">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                </svg>
                                <span>没有找到匹配的视频设备终端</span>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 分隔线 -->
<div class="h-1 my-8 rounded-full bg-gradient-to-r from-transparent via-violet-400 to-transparent"></div>
{% endblock %}