{% url 'access_tokens_management:admin_tokens_search' as search_url %}
<form id="tokens-search-form" class="tka-search-form">
    <div class="tka-search-wrap">
        <input type="text"
               name="{{ filterset.form.search.html_name }}"
               id="tokens-search-input"
               value="{{ filterset.form.search.value|default:'' }}"
               placeholder="Search…"
               class="tka-search-input"
               hx-get="{{ search_url }}"
               hx-include="#tokens-filters-without-search-form-placeholder"
               hx-target="this"
               hx-swap="none"
               hx-trigger="input changed delay:500ms">
        <div class="tka-search-icon-wrap">
            <div id="tokens-search-icon"
                 class="{% if filterset.form.search.value %}tka-search-hidden{% endif %}">
                {% include 'phoxtail_core/svgs/search.html' %}
            </div>
            <button type="button"
                    id="tokens-clear-search"
                    hx-get="{{ search_url }}"
                    hx-include="#tokens-filters-without-search-form-placeholder"
                    hx-target="#tokens-search-input"
                    hx-swap="none"
                    class="tka-search-clear {% if not filterset.form.search.value %}tka-search-hidden{% endif %}">
                {% include 'phoxtail_core/svgs/close.html' %}
            </button>
        </div>
    </div>
</form>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const input = document.getElementById('tokens-search-input');
        const clearBtn = document.getElementById('tokens-clear-search');
        const icon = document.getElementById('tokens-search-icon');
        if (!input) return;

        if (clearBtn) {
            clearBtn.addEventListener('click', function () {
                input.value = '';
                icon.classList.remove('tka-search-hidden');
                clearBtn.classList.add('tka-search-hidden');
            });
        }

        input.addEventListener('input', function () {
            if (this.value.trim().length > 0) {
                icon.classList.add('tka-search-hidden');
                clearBtn.classList.remove('tka-search-hidden');
            } else {
                icon.classList.remove('tka-search-hidden');
                clearBtn.classList.add('tka-search-hidden');
            }
        });
    });
</script>