pokemon/src/components/Search.astro

---
import { Show } from '@clerk/astro/components'
---
<script is:inline>
    const afterUpdate = (e) => {
        const start = document.querySelector('#start');
        if (start) {
            const val = Number(start.value) || 0;
            start.value = (val + 20).toString();
        }
        if (e && e.detail && e.detail.elt) {
            e.detail.elt.remove();
        }
    };
    const beforeSearch = (e) => {
        const notfound = document.getElementById('notfound');
        if (notfound) notfound.innerHTML = '';
        const start = document.querySelector('#start');
        if (start) {
            start.value = '0';
            document.querySelector('#cardGrid').innerHTML = '';
            window.scrollTo({ top: 0, behavior: 'instant' });
        }
    };
</script>

<Show when="signed-in">
    <form
        class="d-flex align-items-center"
        role="search"
        id="searchform"
        hx-post="/partials/cards"
        hx-target="#cardGrid"
        hx-trigger="load, submit"
        hx-vals='{"start":"0"}'
        hx-on--after-request="afterUpdate()"
        hx-on--before-request="beforeSearch()"
    >
        <div class="input-group">
            {Astro.url.pathname === '/pokemon' && (
                <a class="btn btn-purple" data-bs-toggle="offcanvas" href="#filterBar" type="button" role="button" aria-controls="filterBar" aria-label="filter">
                    <span class="d-block d-md-none filter-icon py-2">
                        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M528.8 96.3C558.6 90.8 571.2 118.9 568.9 142.2C572.3 173.4 570.8 207 553.9 230.8C513.9 283.2 459.3 315.9 414.3 364.3C414.9 418.3 419.8 459.8 423.6 511.2C427.6 552.4 388.7 586.8 346.6 570.1C303.2 550.5 259.4 527.5 230.4 493.3C217 453.1 225.9 407.5 222.2 365.3C222.2 365.3 222.1 365.1 222 365C151.4 319.6 59.3 250.9 61 158.4C59.9 121 91.8 96.1 123.8 96.5C259.3 98.5 394.1 104.4 528.8 96.3zM506.1 161.4C378.3 168.2 252 162.1 125.2 160.5C128.6 227 199 270.8 250 306.8C305.5 335.4 281.6 410.5 288.3 461.7C310.8 478.9 334.6 494.6 358.9 505.8C355.4 458 350.7 415.4 350.2 364.6C349.9 349.2 355.3 333.7 366.5 321.7C384.3 302.6 402.8 287.8 421.5 270.1C446.1 245.2 477.9 225.1 499.7 196.7C509 182.2 504.7 174.5 506 161.5z"/></svg>
                    </span>
                    <span class="d-none d-md-block fw-medium">Filters</span>
                </a>
            )}
            <input type="hidden" name="start" id="start" value="0" />
            <input type="hidden" name="sort" id="sortInput" value="" />
            <input type="hidden" name="language" id="languageInput" value="all" />
            <input type="search" name="q" id="searchInput" class="form-control search-input" placeholder="Search cards" />
            <button
                type="submit"
                class="btn btn-purple border-start-0"
                aria-label="search"
                onclick="
                    const q = this.closest('form').querySelector('[name=q]').value;
                    dataLayer.push({ event: 'view_search_results', search_term: q });
                    if (window.location.pathname !== '/pokemon') {
                        event.preventDefault();
                        event.stopPropagation();
                        sessionStorage.setItem('pendingSearch', q);
                        window.location.href = '/pokemon';
                    }
                "
            >
                <svg aria-hidden="true" class="search-button d-block" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><path d="M503.7 304.9C520.3 80.3 214-44 100.9 169.4C-14.1 383.9 203.9 614.6 419.8 466.3C459.7 500.3 494.8 542.3 531.5 578.2C561.1 607.7 606.3 562.8 576.8 533L540 496.1C520.2 471.6 495.7 449.1 473.7 428.9C471.1 426.5 468.5 424.2 466 421.9C491.9 385.4 500.1 341 503.7 304.8zM236.1 129C334 92.1 452.1 198.1 440 298.6C440.5 404.9 335.6 462.2 244 445.8C99 407.1 100.3 178.9 236.2 129z"/></svg>
            </button>
        </div>
    </form>
</Show>