{% extends "django_sample_components/pages/master_async.html" %}
{% load async_tags %}

{% block title %}Async Active Search{% endblock %}

{% block content %}
    <div class="container mt-5">
        <h1>Async Active Search with HTMX</h1>
        <p class="text-muted">Search input that filters results on every keystroke — no page reload.</p>

        <hr>

        <div class="row">
            <div class="col-md-8">
                <h5>Default (search all contacts)</h5>
                <p>Results update 300ms after you stop typing:</p>
                <div class="mt-3">
                    {% async_active_search %}
                </div>
            </div>
        </div>

        <hr>

        <div class="row mt-4">
            <div class="col-md-8">
                <h5>Custom placeholder</h5>
                <div class="mt-3">
                    {% async_active_search placeholder="Search by name or email..." %}
                </div>
            </div>
        </div>

        <hr>

        <section class="mt-5">
            <h5>How It Works</h5>
            <ul>
                <li>Type in the search box — HTMX sends a GET request after 300ms of inactivity</li>
                <li>Pressing <strong>Enter</strong> triggers the search immediately</li>
                <li>On page load, all contacts are shown (empty search returns all)</li>
                <li>The server filters contacts by first name, last name, or email (case-insensitive)</li>
            </ul>
        </section>
    </div>
{% endblock %}