{% load i18n %}
<h3>{% trans "元素过滤" %}</h3>
<div style="padding: 10px; background: #f8f9fa; border-radius: 4px; margin: 10px 0;">
    <div style="margin-bottom: 10px;">
        <label style="display: block; margin-bottom: 5px; font-weight: bold; font-size: 12px;">
            输入过滤条件:
        </label>
        <input type="text" 
               id="element_filter_input" 
               placeholder="例如: {Li,Cl} 或 [Br] 或 {Li,Cl}[Br]" 
               style="width: 100%; padding: 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 13px;"
               value="{% if selected %}{{ selected }}{% endif %}">
        <small style="color: #666; font-size: 11px; display: block; margin-top: 5px;">
            格式说明: {Li,Cl} 表示包含Li和Cl，[Br] 表示排除Br，{Li,Cl}[Br] 表示包含Li和Cl且排除Br
        </small>
    </div>
    
    <div style="margin-top: 10px;">
        <button type="button" 
                id="apply_element_filter_btn" 
                style="padding: 6px 12px; background: #007bff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px; margin-right: 5px;">
            应用
        </button>
        <button type="button" 
                id="clear_element_filter_btn" 
                style="padding: 6px 12px; background: #6c757d; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 12px;">
            清除
        </button>
    </div>
    
    {% if selected %}
    <div style="margin-top: 10px; padding: 8px; background: #d4edda; border: 1px solid #c3e6cb; border-radius: 3px; font-size: 12px;">
        <strong>当前过滤条件:</strong> {{ selected }}
    </div>
    {% endif %}
</div>

<script>
(function() {
    function getCurrentUrl() {
        return window.location.pathname + window.location.search;
    }
    
    function buildFilterUrl(filterValue) {
        var url = window.location.pathname;
        var params = new URLSearchParams(window.location.search);
        
        if (filterValue && filterValue.trim()) {
            params.set('element_filter', filterValue.trim());
        } else {
            params.delete('element_filter');
        }
        
        // 重置分页
        params.delete('p');
        
        var queryString = params.toString();
        if (queryString) {
            url += '?' + queryString;
        }
        
        return url;
    }
    
    function applyElementFilter() {
        try {
            var input = document.getElementById('element_filter_input');
            if (!input) return;
            
            var filterValue = input.value.trim();
            var newUrl = buildFilterUrl(filterValue);
            window.location.href = newUrl;
        } catch (e) {
            console.error('应用元素过滤失败:', e);
            alert('应用过滤失败: ' + e.message);
        }
    }
    
    function clearElementFilter() {
        try {
            var input = document.getElementById('element_filter_input');
            if (input) {
                input.value = '';
            }
            var newUrl = buildFilterUrl('');
            window.location.href = newUrl;
        } catch (e) {
            console.error('清除元素过滤失败:', e);
        }
    }
    
    // 等待DOM加载
    function init() {
        var input = document.getElementById('element_filter_input');
        var applyBtn = document.getElementById('apply_element_filter_btn');
        var clearBtn = document.getElementById('clear_element_filter_btn');
        
        if (input) {
            // 回车键应用
            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    e.preventDefault();
                    applyElementFilter();
                }
            });
            
            // 自动聚焦
            input.focus();
        }
        
        if (applyBtn) {
            applyBtn.addEventListener('click', function(e) {
                e.preventDefault();
                applyElementFilter();
            });
        }
        
        if (clearBtn) {
            clearBtn.addEventListener('click', function(e) {
                e.preventDefault();
                clearElementFilter();
            });
        }
    }
    
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        setTimeout(init, 100);
    }
})();
</script>