{% load i18n static simpletags simpleexttags %}
{% if result_hidden_fields %}
    <div class="hiddenfields">{# DIV for HTML validation #}
        {% for item in result_hidden_fields %}{{ item }}{% endfor %}
    </div>
{% endif %}
{#{% if results %}#}
<div class="results">
    <table id="result_list">
        <thead>
        <tr>
            {% for header in result_headers %}
                <th scope="col" {{ header.class_attrib }}>
                    {% if header.sortable %}
                        {% if header.sort_priority > 0 %}
                            <div class="sortoptions">
                                <a class="sortremove" href="{{ header.url_remove }}"
                                   title="{% trans "Remove from sorting" %}"></a>
                                {% if num_sorted_fields > 1 %}<span class="sortpriority"
                                                                    title="{% blocktrans with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktrans %}">{{ header.sort_priority }}</span>{% endif %}
                                <a href="{{ header.url_toggle }}"
                                   class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}"
                                   title="{% trans "Toggle sorting" %}"></a>
                            </div>
                        {% endif %}
                    {% endif %}
                    <div class="text">{% if header.sortable %}
                        <a href="{{ header.url_primary }}">{{ header.text|capfirst }}</a>{% else %}
                        <span>{{ header.text|capfirst }}</span>{% endif %}</div>
                    <div class="clear"></div>
                </th>{% endfor %}
        </tr>
        </thead>
        <tbody>
        {% for result in results %}
            {% if result.form.non_field_errors %}
                <tr>
                    <td colspan="{{ result|length }}">{{ result.form.non_field_errors }}</td>
                </tr>
            {% endif %}
            <tr class="{% cycle 'row1' 'row2' %}">
                {% for item in result %}
                    {% with instance=result.form.instance %}
                        {% with field_info=item|table_item_type:instance %}
                            {% if field_info.field_type == 'boolean' %}
                                <td class="field-{{ field_info.field_name }}">
                                    {% if field_info.editable %}
                                        <!-- 保留原始复选框但隐藏它 -->
                                        <input type="checkbox"
                                               id="{{ field_info.input_id }}"
                                               name="{{ field_info.input_name }}"
                                               style="display:none"
                                               {% if field_info.value %}checked{% endif %}>
                                        <!-- 添加 El-Switch 组件 -->
                                        <el-switch v-model="checked"
                                                   @change="updateCheckbox('{{ field_info.input_id }}')"
                                                   >
                                        </el-switch>
                                    {% else %}
                                        <!-- 不可编辑的布尔字段 -->
                                        <el-tag type="{{ field_info.value|yesno:'success,danger' }}" size="small">
                                            {{ field_info.value|yesno:_("Yes,No") }}
                                        </el-tag>
                                    {% endif %}
                                </td>

                            {% elif field_info.field_type == 'image' %}
                                <td class="field-{{ field_info.field_name }}">
                                    {% if field_info.value %}
                                    <el-image
                                    src="{{ field_info.value }}"
                                    :preview-src-list="['{{ field_info.value }}']"
                                    style="width: 45px; height: 45px; object-fit: cover;border-radius: 4px;"
                                    fit="cover">
                                </el-image>

                                    {% else %}
                                        {% trans "No Image" %}
                                    {% endif %}
                                </td>
                            {% elif field_info.field_type == 'tag' %}
                                <td class="field-{{ field_info.field_name }}">
                                    <el-tag type="{{ field_info.tag_type }}" size="small">
                                        {{ field_info.display_name }}
                                    </el-tag>
                                </td>
                            {% else %}
                                {{ item }}
                            {% endif %}
                            <script type="text/javascript">
                                new Vue({
                                    el: ".field-{{ field_info.field_name }}",
                                    data() {
                                        return {
                                            checked: {{ field_info.value|yesno:'true,false' }}
                                        }
                                    },
                                    methods: {
                                        updateCheckbox(id) {
                                            // 更新隐藏的复选框
                                            document.getElementById(id).checked = this.checked;
                                        }
                                    }
                                })
                            </script>
                        {% endwith %}
                    {% endwith %}
                {% endfor %}
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>
{#{% endif %}#}