---
import { SignedIn } 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();
        }
        // delete the triggering element
        if (e && e.detail && e.detail.elt) {
            e.detail.elt.remove();
        }
    };
    const beforeSearch = (e) => {
        const start = document.querySelector('#start');
        if (start) {
            start.value = '0';
            document.querySelector('#cardGrid').innerHTML = '';
            window.scrollTo({ top: 0, behavior: 'instant' });
        }
    };
</script>

<SignedIn>
    <form class="d-flex ms-2" 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()">
        <input type="hidden" name="start" id="start" value="0" />
        <input type="search" name="q" class="form-control form-control-lg me-2" placeholder="Search cards..." />
        <input type="submit" class="btn btn-outline-light" value="Search" onclick="const q = document.querySelector('[name=q]').value; dataLayer.push({ event: 'view_search_results', search_term: q });"/>
    </form>
</SignedIn>