<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>
<form>
<p class="my-2">
{% render "@input-text" with {
id: "keywords",
title: "Search by keyword",
placeholder: "__",
wrapper: false
} %}
</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">
{% apply spaceless %}
<div id="edit-type" class="form-boolean-group form-checkboxes">
{% render "@input-checkbox" with { "id": "type-comedy", "toggle": true, "inline": true, "title": "Comedy" } %}
{% render "@input-checkbox" with { "id": "type-theatre", "toggle": true, "inline": true, "title": "Theatre" } %}
{% render "@input-checkbox" with { "id": "type-family", "toggle": true, "inline": true, "title": "Family" } %}
{% render "@input-checkbox" with { "id": "type-new-season", "toggle": true, "inline": true, "title": "New Season" } %}
</div>
{% endapply %}
</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">
{% apply spaceless %}
<div id="edit-type" class="form-boolean-group form-checkboxes">
{% render "@input-checkbox" with { "id": "location-edinburgh", "toggle": true, "inline": true, "title": "Edinburgh" } %}
{% render "@input-checkbox" with { "id": "location-london", "toggle": true, "inline": true, "title": "London" } %}
{% render "@input-checkbox" with { "id": "location-pleasance-courtyard", "toggle": true, "inline": true, "title": "Pleasance Courtyard" } %}
{% render "@input-checkbox" with { "id": "location-main-house", "toggle": true, "inline": true, "title": "Main House" } %}
</div>
{% endapply %}
</div>
</div>
<hr class="my-2">
<div class="row my-2">
<div class="col-6">
{% render "@input-date" with { "title": "From" } %}
</div>
<div class="col-6">
{% render "@input-date" with { "title": "To" } %}
</div>
</div>
<hr class="my-2">
<p class="d-grid gap-2 my-2">
{% render "@button" with { "title": "Apply", "type": "input", "style": "apply" } %}
{% render "@button" with { "title": "Clear filters", "type": "input", "style": "secondary" } %}
</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>
/* No context defined. */
No notes defined.