---
const { query } = Astro.props;
---

    <div class="row mb-5">
        <div class="col-md-3 display-sm-none">
            <div class="h5 d-none">Inventory management placeholder</div>
            <form method="GET">
                <div>
                    <input type="text" name="q" class="form-control w-100 mb-2" placeholder="Search cards..." value={query} />
                </div>
                <div>
                    <input type="button" class="btn btn-primary mb-2" value="Search" />
                </div>
            </form>
        </div>
        <div class="col-sm-12 col-md-9 mt-0">
            <div class="row g-3 row-cols-2 row-cols-lg-3 row-cols-xl-4 d-flex">
                <slot name="Card">
            </div>
        </div>
    </div>