<form class="performance-filter-form">

    <div class="container-fluid">
        <div class="row my-2">
            <div class="col-12 col-md-4 px-1 ps-md-2 pe-md-3">
                <div class="d-grid gap-2">
                    <label id="label-date" aria-labels="section-date">
                        Date
                    </label>
                </div>
                <div id="section-date" class="container-fluid">
                    <div class="row my-2">
                        <div class="col-6 border-end border-secondary border-2 pb-2">
                            <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 pb-2">
                            <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>
                </div>
                <div class="d-grid gap-2">
                    <label id="label-time" aria-labels="section-time">
                        Time
                    </label>
                </div>
                <div id="section-time" class="container-fluid">
                    <div class="row my-2">
                        <div class="col-6 border-end border-secondary border-2 pb-2">
                            <label for="time" class="form-label">From</label>
                            <input type="time" class="form-control" id="time" name="time" value="" size="60" maxlength="128" placeholder="">
                        </div>
                        <div class="col-6 pb-2">
                            <label for="time" class="form-label">To</label>
                            <input type="time" class="form-control" id="time" name="time" value="" size="60" maxlength="128" placeholder="">
                        </div>
                    </div>
                </div>
            </div>

            <hr class="my-2 d-md-none">

            <div class="col-12 col-md-4 px-1 ps-md-3 pe-md-3 border-start border-secondary border-2 border-md-down-none">
                <div class="d-grid gap-2">
                    <label id="label-performance-location" class="filter-form__heading chevron chevron-down" data-bs-toggle="collapse" data-bs-target="#section-performance-location" aria-expanded="false" aria-controls="section-performance-location">
                        Location
                    </label>
                </div>
                <div id="section-performance-location" class="my-2 collapse d-md-block" aria-labelledby="label-performance-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 d-md-none">

            <div class="col-12 col-md-4 d-flex flex-column justify-content-end border-start border-2 border-secondary border-md-down-none px-1 ps-md-3 pe-md-2">
                <div>
                    <p class="d-grid gap-2 my-2">
                        <button type="submit" class="btn btn-apply chevron order-2" id="button" name="button">Apply filters</button>
                        <button type="submit" class="btn btn-primary order-1" id="button" name="button">Clear filters</button>
                    </p>
                </div>
            </div>
        </div>
    </div>

</form>
<form class="performance-filter-form">

  <div class="container-fluid">
    <div class="row my-2">
      <div class="col-12 col-md-4 px-1 ps-md-2 pe-md-3">
        <div class="d-grid gap-2">
          <label id="label-date" aria-labels="section-date">
            Date
          </label>
        </div>
        <div id="section-date" class="container-fluid">
          <div class="row my-2">
            <div class="col-6 border-end border-secondary border-2 pb-2">
              {% render "@input-date" with { "title": "From" } %}
            </div>
            <div class="col-6 pb-2">
              {% render "@input-date" with { "title": "To" } %}
            </div>
          </div>
        </div>
        <div class="d-grid gap-2">
          <label id="label-time" aria-labels="section-time">
            Time
          </label>
        </div>
        <div id="section-time" class="container-fluid">
          <div class="row my-2">
            <div class="col-6 border-end border-secondary border-2 pb-2">
              {% render "@input-time" with { "title": "From" } %}
            </div>
            <div class="col-6 pb-2">
              {% render "@input-time" with { "title": "To" } %}
            </div>
          </div>
        </div>
      </div>

      <hr class="my-2 d-md-none">

      <div class="col-12 col-md-4 px-1 ps-md-3 pe-md-3 border-start border-secondary border-2 border-md-down-none">
        <div class="d-grid gap-2">
          <label id="label-performance-location" class="filter-form__heading chevron chevron-down" data-bs-toggle="collapse" data-bs-target="#section-performance-location" aria-expanded="false" aria-controls="section-performance-location">
            Location
          </label>
        </div>
        <div id="section-performance-location" class="my-2 collapse d-md-block" aria-labelledby="label-performance-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 d-md-none">

      <div class="col-12 col-md-4 d-flex flex-column justify-content-end border-start border-2 border-secondary border-md-down-none px-1 ps-md-3 pe-md-2">
        <div>
          <p class="d-grid gap-2 my-2">
            <button type="submit" class="btn btn-apply chevron order-2" id="button" name="button">Apply filters</button>
            <button type="submit" class="btn btn-primary order-1" id="button" name="button">Clear filters</button>
          </p>
        </div>
      </div>
    </div>
  </div>

</form>
/* No context defined. */

No notes defined.