---
import BackToTop from "./BackToTop.astro"
---
<div class="row mb-4">
    <div class="col-md-3 display-sm-none">
        <div class="h5 d-none">Inventory management placeholder</div>
        <div class="offcanvas offcanvas-start" data-bs-backdrop="static" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
        <div class="offcanvas-header">
            <h5 class="offcanvas-title" id="offcanvasExampleLabel">Filter by:</h5>
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body px-3 pt-0">
            <div id="facetContainer"></div>
        </div>
        </div>
    </div>
    <div class="col-sm-12 col-md-9 mt-0">
        <div id="activeFilters" class="mb-2 d-flex align-items-center justify-content-end small">
            <span class="me-1">Filtered by:</span>
            <ul class="list-group list-group-horizontal">
                <li class="list-group-item border-0">Filter 1</li>
                <li class="list-group-item border-0">Filter 2</li>
                <li class="list-group-item border-0">Filter 3</li>
            </ul>
            <span class="ms-2"><button type="button" class="btn-close" aria-label="Clear all filters"></button></span>
        </div>
        <div id="cardGrid" class="row g-xxl-3 g-2 row-cols-2 row-cols-lg-3 row-cols-xxl-4 row-cols-xxxl-5">
        </div>
        <div id="notfound"></div>
    </div>
</div>
<div class="modal fade card-modal" id="cardModal" tabindex="-1" aria-labelledby="cardModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-fullscreen-md-down modal-xl">
        <div class="modal-content">
        </div>
    </div>
</div>
<BackToTop>