Filter Drawer

<div id="filter-drawer" class="filter-drawer offcanvas offcanvas-start">
    <div class="offcanvas-header align-items-start">
        <h5 class="offcanvas-title text-uppercase">Filter shows</h5>
        <button type="button" class="btn-close btn-secondary" data-bs-dismiss="offcanvas" data-bs-target="#filter-drawer" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <form>

            <p class="my-2">
                <label for="keywords" class="form-label">Search by keyword</label>
                <input type="text" class="mb-2 form-control" id="keywords" name="keywords" value="" size="60" maxlength="128" placeholder="__">
            </p>

            <hr class="my-2">

            <div class="my-2">
                <div class="d-grid gap-2">
                    <button class="btn btn-secondary chevron chevron-down" type="button" data-bs-toggle="collapse" data-bs-target="#section-type" aria-expanded="false" aria-controls="section-type">
                        Genre
                    </button>
                </div>
                <div id="section-type" class="collapse m-2" aria-labelledby="heading-type">
                    <div id="edit-type" class="form-boolean-group form-checkboxes"><input type="checkbox" class="btn-check" id="type-comedy" name="type-comedy" value=""><label for="type-comedy" class=" btn btn-primary d-inline-block my-1 me-1">Comedy</label><input type="checkbox" class="btn-check" id="type-theatre" name="type-theatre" value=""><label for="type-theatre" class=" btn btn-primary d-inline-block my-1 me-1">Theatre</label><input type="checkbox" class="btn-check" id="type-family" name="type-family" value=""><label for="type-family" class=" btn btn-primary d-inline-block my-1 me-1">Family</label><input type="checkbox" class="btn-check" id="type-new-season" name="type-new-season" value=""><label for="type-new-season" class=" btn btn-primary d-inline-block my-1 me-1">New Season</label></div>
                </div>
            </div>

            <hr class="my-2">

            <div class="my-2">
                <div class="d-grid gap-2">
                    <button class="btn btn-secondary chevron chevron-down" type="button" data-bs-toggle="collapse" data-bs-target="#section-location" aria-expanded="false" aria-controls="section-location">
                        Location
                    </button>
                </div>
                <div id="section-location" class="collapse m-2" aria-labelledby="heading-location">
                    <div id="edit-type" class="form-boolean-group form-checkboxes"><input type="checkbox" class="btn-check" id="location-edinburgh" name="location-edinburgh" value=""><label for="location-edinburgh" class=" btn btn-primary d-inline-block my-1 me-1">Edinburgh</label><input type="checkbox" class="btn-check" id="location-london" name="location-london" value=""><label for="location-london" class=" btn btn-primary d-inline-block my-1 me-1">London</label><input type="checkbox" class="btn-check" id="location-pleasance-courtyard" name="location-pleasance-courtyard" value=""><label for="location-pleasance-courtyard" class=" btn btn-primary d-inline-block my-1 me-1">Pleasance Courtyard</label><input type="checkbox" class="btn-check" id="location-main-house" name="location-main-house" value=""><label for="location-main-house" class=" btn btn-primary d-inline-block my-1 me-1">Main House</label></div>
                </div>
            </div>

            <hr class="my-2">

            <div class="row my-2">
                <div class="col-6">
                    <label for="date" class="form-label">From</label>
                    <input type="date" class="form-control" id="date" name="date" value="" size="60" maxlength="128" placeholder="">
                </div>
                <div class="col-6">
                    <label for="date" class="form-label">To</label>
                    <input type="date" class="form-control" id="date" name="date" value="" size="60" maxlength="128" placeholder="">
                </div>
            </div>

            <hr class="my-2">

            <p class="d-grid gap-2 my-2">
                <input type="submit" class="my-2 btn btn-apply" id="button" name="button" value="Apply">
                <input type="submit" class="my-2 btn btn-secondary" id="button" name="button" value="Clear filters">
            </p>

            <hr class="my-2">

            <p class="d-grid gap-2 my-2">
                <a href="#" class="btn btn-primary">Accessible performances</a>
            </p>

            <hr class="my-2">

            <p class="d-grid gap-2 my-2">
                <a href="#" class="btn btn-primary">Forget all that ... inspire me!</a>
            </p>

        </form>
    </div>
</div>