{% extends "base.html" %}

{% block content %}
<div class="container mx-auto p-4">
    <h2 class="text-xl font-bold mb-4">视频设备终端列表</h2>

    <!-- 筛选表单 -->
    <form method="GET" class="mb-4 p-4 bg-gray-100 rounded-lg">
        <div class="flex flex-wrap gap-4">
            <!-- 分支机构筛选 -->
            <div class="flex flex-col w-full md:w-1/3">
                <label class="text-sm font-medium">分支机构</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="mt-1 p-2 border rounded w-full"
                       x-on:keydown.backspace="if (!search) selectedId = ''; search = ''"
                >
                <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
                    <div @click="selectedId = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 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-gray-100 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">设备类型</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="mt-1 p-2 border rounded w-full"
                       x-on:keydown.backspace="if (!search) selectedCode = ''; search = ''"
                >
                <div x-show="open" class="absolute z-10 mt-1 w-full bg-white border rounded shadow-lg max-h-60 overflow-y-auto">
                    <div @click="selectedCode = ''; search = ''; open = false" class="p-2 hover:bg-gray-100 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-gray-100 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-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">筛选</button>
            </div>
        </div>
    </form>

    <!-- 终端列表表格 -->
    <table class="min-w-full border-collapse border border-gray-300">
        <thead>
            <tr>
                <th class="p-2 border border-gray-300 bg-gray-100">分支机构</th>
                <th class="p-2 border border-gray-300 bg-gray-100">设备类型</th>
                <th class="p-2 border border-gray-300 bg-gray-100">设备描述</th>
                <th class="p-2 border border-gray-300 bg-gray-100">创建时间</th>
            </tr>
        </thead>
        <tbody>
            {% for terminal in terminals %}
            <tr class="{% cycle 'bg-white' 'bg-gray-50' %}">
                <td class="p-2 border border-gray-300">{{ terminal.branch.name }}</td>
                <td class="p-2 border border-gray-300">{{ terminal.get_terminal_type_display }}</td>
                <td class="p-2 border border-gray-300">{{ terminal.description|default:"" }}</td>
                <td class="p-2 border border-gray-300">{{ terminal.created_at|date:"Y-m-d H:i" }}</td>
            </tr>
            {% empty %}
            <tr>
                <td colspan="4" class="p-4 text-center text-gray-500">没有找到匹配的视频设备终端</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
{% endblock %}