---
import '/src/assets/css/main.scss';
const { query } = Astro.props;
---

<div class="sticky border-bottom">
    <div class="container">
        <form method="GET">
            <div class="d-flex justify-content-between">
                <div class="my-2 flex-grow-1 me-2">
                    <input type="text" name="q" class="form-control w-100 search-box" placeholder="Search cards..." value={query} />
                </div>
                <div class="my-2">
                    <input type="submit" class="w-100 search-button" value="Search" />
                </div>
            </div>
        </form>
    </div>
</div>