vivify-demo-qa.staging.vivifyvenues.com Open in urlscan Pro
18.168.236.225  Public Scan

Submitted URL: http://vivify-demo-qa.staging.vivifyvenues.com/
Effective URL: https://vivify-demo-qa.staging.vivifyvenues.com/
Submission: On February 26 via api from US — Scanned from GB

Form analysis 2 forms found in the DOM

https://vivify-demo-qa.staging.vivifyvenues.com/search

<form action="https://vivify-demo-qa.staging.vivifyvenues.com/search" data-hs-cf-bound="true">
  <input type="hidden" name="search_method" value="postcode">
  <input type="hidden" name="radialDistance" value="30">
  <div class="md:flex rounded-full">
    <div class="grow rounded-md md:rounded-none mb-5 md:mb-0 md:pr-5 block md:border-r w-auto bg-white md:bg-transparent p-2 sm:w-auto sm:mb-0 sm:rounded-none margin-top-5">
      <div class="flex items-center h-full w-full">
        <div class=" w-full">
          <div class="relative rounded-md ">
            <input type="text" autocomplete="off"
              class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none border-transparent focus:border-transparent focus:ring-transparent pr-8 bg-white w-full grow mr-2 block h-full border-0 text-black text-sm focus:outline-none focus:ring-0 py-3 md:py-0 focus:ring-transparent"
              name="postcode" id="postcode" placeholder="Enter your postcode" value="" required="required">
            <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
              </svg>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grow rounded-md md:rounded-none mb-5 md:mb-0 md:pr-5 block md:border-r w-auto bg-white md:bg-transparent p-2 sm:w-auto sm:mb-0 sm:rounded-none margin-top-5">
      <div class="flex justify-start items-center align-middle h-full">
        <div class="flex items-center h-full w-full">
          <div class="relative w-full text-sm" x-data="wireui_select({
            })" x-props="{
        asyncData:    JSON.parse(atob('eyJhcGkiOm51bGwsIm1ldGhvZCI6IkdFVCIsInBhcmFtcyI6W10sImFsd2F5c0ZldGNoIjpmYWxzZX0=')),
        optionValue:  'slug',
        optionLabel:  'title',
        optionDescription: null,
        hasSlot:     false,
        multiselect: false,
        searchable:  true,
        clearable:   true,
        readonly:    false,
        placeholder: 'Select an activity',
        template:    null,
    }">
            <div hidden="" x-ref="json">
              JSON.parse(atob('W3sibGFiZWwiOiJBbGwgQWN0aXZpdGllcyIsInZhbHVlIjoiYWxsIn0seyJsYWJlbCI6IkFkdWx0IExlYXJuaW5nIiwidmFsdWUiOiJhZHVsdC1sZWFybmluZyJ9LHsibGFiZWwiOiJBcnQgQ2xhc3NlcyIsInZhbHVlIjoiYXJ0LWNsYXNzZXMifSx7ImxhYmVsIjoiQmFkbWludG9uIiwidmFsdWUiOiJiYWRtaW50b24ifSx7ImxhYmVsIjoiQmFza2V0YmFsbCIsInZhbHVlIjoiYmFza2V0YmFsbCJ9LHsibGFiZWwiOiJDYXIgQm9vdCIsInZhbHVlIjoiY2FyLWJvb3QifSx7ImxhYmVsIjoiQ2hvaXIgR3JvdXBzIiwidmFsdWUiOiJjaG9pci1ncm91cHMifSx7ImxhYmVsIjoiQ2h1cmNoIEdyb3VwcyIsInZhbHVlIjoiY2h1cmNoLWdyb3VwcyJ9LHsibGFiZWwiOiJDb25mZXJlbmNlIiwidmFsdWUiOiJjb25mZXJlbmNlIn0seyJsYWJlbCI6IkNvbnRlbnQiLCJ2YWx1ZSI6ImNvbnRlbnQifSx7ImxhYmVsIjoiQ29udGVudCBDcmVhdGlvbiIsInZhbHVlIjoiY29udGVudC1jcmVhdGlvbiJ9LHsibGFiZWwiOiJDb29raW5nIiwidmFsdWUiOiJjb29raW5nIn0seyJsYWJlbCI6IkNyaWNrZXQiLCJ2YWx1ZSI6ImNyaWNrZXQifSx7ImxhYmVsIjoiRGFuY2UiLCJ2YWx1ZSI6ImRhbmNlIn0seyJsYWJlbCI6IkRyYW1hIiwidmFsdWUiOiJkcmFtYSJ9LHsibGFiZWwiOiJFdmVudHMiLCJ2YWx1ZSI6ImV2ZW50cyJ9LHsibGFiZWwiOiJmaWxtaW5nIiwidmFsdWUiOiJmaWxtaW5nIn0seyJsYWJlbCI6IkZpdG5lc3MiLCJ2YWx1ZSI6ImZpdG5lc3MifSx7ImxhYmVsIjoiRml0bmVzcyBDbGFzc2VzIiwidmFsdWUiOiJmaXRuZXNzLWNsYXNzZXMifSx7ImxhYmVsIjoiRm9vdGJhbGwiLCJ2YWx1ZSI6ImZvb3RiYWxsIn0seyJsYWJlbCI6IkZ1bmVyYWwgV2FrZXMiLCJ2YWx1ZSI6ImZ1bmVyYWwtd2FrZXMifSx7ImxhYmVsIjoiRnV0c2FsIiwidmFsdWUiOiJmdXRzYWwifSx7ImxhYmVsIjoiR3JvdXAgVHJhaW5pbmciLCJ2YWx1ZSI6Imdyb3VwLXRyYWluaW5nIn0seyJsYWJlbCI6IkhvY2tleSIsInZhbHVlIjoiaG9ja2V5In0seyJsYWJlbCI6IkhvbGlkYXkgQ2FtcCIsInZhbHVlIjoiaG9saWRheS1jYW1wIn0seyJsYWJlbCI6IkludGVydmlld3MiLCJ2YWx1ZSI6ImludGVydmlld3MifSx7ImxhYmVsIjoiTGFuZ3VhZ2UgQ2xhc3NlcyIsInZhbHVlIjoibGFuZ3VhZ2UtY2xhc3NlcyJ9LHsibGFiZWwiOiJMZWN0dXJlcyIsInZhbHVlIjoibGVjdHVyZXMifSx7ImxhYmVsIjoiTGlmZSBEcmF3aW5nIiwidmFsdWUiOiJsaWZlLWRyYXdpbmcifSx7ImxhYmVsIjoiTWFydGlhbCBBcnRzIiwidmFsdWUiOiJtYXJ0aWFsLWFydHMifSx7ImxhYmVsIjoiTWVldGluZ3MiLCJ2YWx1ZSI6Im1lZXRpbmdzIn0seyJsYWJlbCI6Ik11c2ljIiwidmFsdWUiOiJtdXNpYyJ9LHsibGFiZWwiOiJOZXRiYWxsIiwidmFsdWUiOiJuZXRiYWxsIn0seyJsYWJlbCI6IlBhcnRpZXMiLCJ2YWx1ZSI6InBhcnRpZXMifSx7ImxhYmVsIjoiUGVyZm9ybWluZyBBcnRzIiwidmFsdWUiOiJwZXJmb3JtaW5nLWFydHMifSx7ImxhYmVsIjoiUHJpdmF0ZSBUdWl0aW9uIiwidmFsdWUiOiJwcml2YXRlLXR1aXRpb24ifSx7ImxhYmVsIjoiUm91bmRlcnMiLCJ2YWx1ZSI6InJvdW5kZXJzIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJSdW5uaW5nIiwidmFsdWUiOiJydW5uaW5nIn0seyJsYWJlbCI6IlNob3dzIiwidmFsdWUiOiJzaG93cyJ9LHsibGFiZWwiOiJTcXVhc2giLCJ2YWx1ZSI6InNxdWFzaCJ9LHsibGFiZWwiOiJTd2ltbWluZyIsInZhbHVlIjoic3dpbW1pbmcifSx7ImxhYmVsIjoiVGFibGUgVGVubmlzIiwidmFsdWUiOiJ0YWJsZS10ZW5uaXMifSx7ImxhYmVsIjoiVGVubmlzIiwidmFsdWUiOiJ0ZW5uaXMifSx7ImxhYmVsIjoiVGhlYXRyZSBHcm91cHMiLCJ2YWx1ZSI6InRoZWF0cmUtZ3JvdXBzIn0seyJsYWJlbCI6IlRyYWluaW5nIiwidmFsdWUiOiJ0cmFpbmluZyJ9LHsibGFiZWwiOiJUcmFtcG9saW5pbmciLCJ2YWx1ZSI6InRyYW1wb2xpbmluZyJ9LHsibGFiZWwiOiJWb2xsZXliYWxsIiwidmFsdWUiOiJ2b2xsZXliYWxsIn0seyJsYWJlbCI6IldhdGVyIFBvbG8iLCJ2YWx1ZSI6IndhdGVyLXBvbG8ifSx7ImxhYmVsIjoiV2VkZGluZyBSZWNlcHRpb25zIiwidmFsdWUiOiJ3ZWRkaW5nLXJlY2VwdGlvbnMifSx7ImxhYmVsIjoiV29yc2hpcCIsInZhbHVlIjoid29yc2hpcCJ9LHsibGFiZWwiOiJZb2dhIiwidmFsdWUiOiJ5b2dhIn1d'))
            </div>
            <div hidden="" x-ref="slot"></div>
            <div class="relative">
              <div class=" w-full">
                <div class="relative rounded-md ">
                  <div :class="{
                    'pointer-events-none': config.readonly,
                    'cursor-pointer': !config.readonly,
                }" class="cursor-pointer">
                    <template x-if="!config.multiselect">
                      <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                        <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()">
                        </span>
                      </div>
                    </template>
                    <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                      <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()"><span>All Activities</span></span>
                    </div>
                    <template x-if="config.multiselect">
                      <div class="absolute left-0 inset-y-0 pl-3 pr-14 w-full flex items-center overflow-hidden" x-on:click="toggle">
                        <div class="flex items-center gap-2 overflow-x-auto hide-scrollbar">
                          <span class="inline-flex text-secondary-700 text-sm" x-show="selectedOptions.length" x-text="selectedOptions.length">
                          </span>
                          <div wire:ignore="" class="flex flex-nowrap items-center gap-1">
                            <template x-for="(option, index) in selectedOptions" :key="`selected.${index}`">
                              <span class="
                                                inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium
                                                border border-secondary-200 shadow-sm bg-secondary-100 text-secondary-700
                                            ">
                                <span style="max-width: 5rem" class="truncate" x-text="option.label"></span>
                                <button class="shrink-0 h-4 w-4 flex items-center text-secondary-400 justify-center hover:text-secondary-500" x-on:click.stop="unSelect(option)" tabindex="-1" type="button">
                                  <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                  </svg>
                                </button>
                              </span>
                            </template>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                  <input type="text" autocomplete="disabled"
                    class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none border-transparent focus:border-transparent focus:ring-transparent cursor-pointer overflow-hidden !text-transparent selection:bg-transparent"
                    x-ref="input" x-on:click="toggle" x-on:focus="open" x-on:blur.debounce.750ms="closeIfNotFocused" x-on:keydown.enter.stop.prevent="toggle" x-on:keydown.space.stop.prevent="toggle"
                    x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" x-bind:placeholder="getPlaceholder" x-bind:value="getSelectedValue" inputmode="none"
                    name="activity" value="all" required="required" id="69a256025f66e4ce5d15c9dd7225d357" placeholder="Select an activity">
                  <div class="absolute inset-y-0 right-0 flex items-center pr-2 gap-x-2">
                    <button x-show="!isEmpty()" x-on:click="clear" tabindex="-1" type="button">
                      <svg class="w-4 h-4 text-secondary-400 hover:text-negative-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>
                    </button>
                    <button tabindex="-1" x-on:click="toggle" type="button">
                      <svg class="w-5 h-5
                            text-secondary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="fixed inset-0 z-20 flex items-end sm:z-10 sm:absolute sm:inset-auto transition-all ease-linear duration-150 sm:w-full" style="display: none" x-show="popover" x-ref="popover" x-on:click.outside="close"
              x-on:keydown.escape.window="handleEscape">
              <div class="fixed inset-0 transition-opacity bg-secondary-400 bg-opacity-60 sm:hidden dark:bg-secondary-700 dark:bg-opacity-60" x-show="popover" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-on:click="close" aria-hidden="true" style="display: none;">
              </div>
              <div class="w-full rounded-t-md sm:rounded-xl border border-secondary-200 bg-white shadow-lg dark:bg-secondary-800 dark:border-secondary-600 transition-all relative overflow-hidden" x-show="popover" tabindex="-1"
                x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" style="display: none;">
                <template x-if="asyncData.api || (config.searchable &amp;&amp; options.length >= 11)">
                  <div class="px-2 my-2" wire:key="search.options.activity">
                    <div class=" w-full">
                      <div class="relative rounded-md ">
                        <input type="text" autocomplete="off"
                          class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                          x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                        <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="px-2 my-2" wire:key="search.options.activity">
                  <div class=" w-full">
                    <div class="relative rounded-md ">
                      <input type="text" autocomplete="off"
                        class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                        x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                      <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="max-h-64 sm:max-h-60 overflow-y-auto overscroll-contain soft-scrollbar select-none" tabindex="-1" x-ref="optionsContainer" name="wireui.select.options.activity"
                  x-on:keydown.tab.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.shift.tab.prevent="getPrevFocusable().focus()"
                  x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()">
                  <div class="w-full h-0.5 rounded-full relative overflow-hidden" :class="{
                    'bg-gray-200': asyncData.fetching
                }">
                    <div class="bg-primary-500 h-0.5 rounded-full absolute animate-linear-progress" style="width: 30%; display: none;" x-show="asyncData.fetching">
                    </div>
                  </div>
                  <ul x-ref="listing" wire:ignore="">
                    <template x-for="(option, index) in displayOptions" :key="`${index}.${option.value}`">
                      <li tabindex="-1" :index="index">
                        <div class="px-2 py-0.5">
                          <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                        </div>
                      </li>
                    </template>
                    <li tabindex="-1" :index="index" index="0">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="1">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="2">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="3">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="4">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="5">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="6">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="7">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="8">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="9">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="10">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="11">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="12">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="13">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="14">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="15">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="16">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="17">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="18">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="19">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="20">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="21">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="22">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="23">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="24">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="25">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="26">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="27">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="28">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="29">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="30">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="31">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="32">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="33">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="34">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="35">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="36">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="37">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="38">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="39">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="40">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="41">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="42">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="43">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="44">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="45">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="46">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="47">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="48">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="49">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="50">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="51">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button
      class="transition-colors duration-200 border-2 font-semibold rounded-full inline-flex items-center my-5 md:my-3 w-auto justify-center whitespace-nowrap overflow-hidden overflow-ellipsis p-[20px] md:px-[40px] md:py-[13px] bg-complimentary-purple-dark text-white border-complimentary-purple-dark hover:bg-[#6A23AD] hover:border-[#6A23AD]">
      <span>Find a venue</span>
      <span class="">
        <svg class="ml-3 | animateSearch" width="13" height="13" viewBox="0 0 13 13" fill="none">
          <path
            d="M9.06797 9.06845L12.4241 12.4246M10.4104 5.7123C10.4104 8.30727 8.30679 10.4109 5.71181 10.4109C3.11683 10.4109 1.01318 8.30727 1.01318 5.7123C1.01318 3.11732 3.11683 1.01367 5.71181 1.01367C8.30679 1.01367 10.4104 3.11732 10.4104 5.7123Z"
            stroke="currentColor" stroke-width="1.00685" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
    </button>
  </div>
</form>

https://vivify-demo-qa.staging.vivifyvenues.com/search

<form action="https://vivify-demo-qa.staging.vivifyvenues.com/search" data-hs-cf-bound="true">
  <input type="hidden" name="search_method" value="location">
  <div class="md:flex rounded-full">
    <div class="grow rounded-md md:rounded-none mb-5 md:mb-0 md:pr-5 block md:border-r w-auto bg-white md:bg-transparent p-2 sm:w-auto sm:mb-0 sm:rounded-none margin-top-5">
      <div class="flex justify-start items-center align-middle h-full">
        <div class="flex items-center h-full w-full">
          <div class="relative w-full text-sm" x-data="wireui_select({
            })" x-props="{
        asyncData:    JSON.parse(atob('eyJhcGkiOm51bGwsIm1ldGhvZCI6IkdFVCIsInBhcmFtcyI6W10sImFsd2F5c0ZldGNoIjpmYWxzZX0=')),
        optionValue:  'slug',
        optionLabel:  'title',
        optionDescription: null,
        hasSlot:     false,
        multiselect: false,
        searchable:  true,
        clearable:   true,
        readonly:    false,
        placeholder: 'Select a location',
        template:    null,
    }">
            <div hidden="" x-ref="json">
              JSON.parse(atob('W3sibGFiZWwiOiJBY2NyaW5ndG9uIiwidmFsdWUiOiJBY2NyaW5ndG9uIn0seyJsYWJlbCI6IkFsdHJpbmNoYW0iLCJ2YWx1ZSI6ImFsdHJpbmNoYW0ifSx7ImxhYmVsIjoiQmlybWluZ2hhbSIsInZhbHVlIjoiYmlybWluZ2hhbSJ9LHsibGFiZWwiOiJCbGFja3Bvb2wiLCJ2YWx1ZSI6ImJsYWNrcG9vbCJ9LHsibGFiZWwiOiJCb2x0b24iLCJ2YWx1ZSI6ImJvbHRvbiJ9LHsibGFiZWwiOiJCb3VybmUgRW5kIiwidmFsdWUiOiJib3VybmUtZW5kIn0seyJsYWJlbCI6IkJyYWRmb3JkIiwidmFsdWUiOiJicmFkZm9yZCJ9LHsibGFiZWwiOiJCcmlzdG9sIiwidmFsdWUiOiJicmlzdG9sIn0seyJsYWJlbCI6IkNhbWJyaWRnZSIsInZhbHVlIjoiY2FtYnJpZGdlIn0seyJsYWJlbCI6IkNhbnRlcmJ1cnkiLCJ2YWx1ZSI6ImNhbnRlcmJ1cnkifSx7ImxhYmVsIjoiQ2F0Zm9yZCIsInZhbHVlIjoiY2F0Zm9yZCJ9LHsibGFiZWwiOiJDaGVzdGVyZmllbGQiLCJ2YWx1ZSI6ImNoZXN0ZXJmaWVsZCJ9LHsibGFiZWwiOiJDb3Jud2FsbCIsInZhbHVlIjoiY29ybndhbGwifSx7ImxhYmVsIjoiRGFydGZvcmQiLCJ2YWx1ZSI6ImRhcnRmb3JkIn0seyJsYWJlbCI6IkRhdmVudHJ5IiwidmFsdWUiOiJkYXZlbnRyeSJ9LHsibGFiZWwiOiJEZXJieSIsInZhbHVlIjoiZGVyYnkifSx7ImxhYmVsIjoiRG9uY2FzdGVyIiwidmFsdWUiOiJkb25jYXN0ZXIifSx7ImxhYmVsIjoiRHVyaGFtIiwidmFsdWUiOiJkdXJoYW0ifSx7ImxhYmVsIjoiRWFzdCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6ImVhc3QteW9ya3NoaXJlIn0seyJsYWJlbCI6IkVuZmllbGQiLCJ2YWx1ZSI6ImVuZmllbGQifSx7ImxhYmVsIjoiRXNzZXgiLCJ2YWx1ZSI6IkVzc2V4In0seyJsYWJlbCI6IkhhbGlmYXgiLCJ2YWx1ZSI6ImhhbGlmYXgifSx7ImxhYmVsIjoiSGF5ZXMiLCJ2YWx1ZSI6ImhheWVzIn0seyJsYWJlbCI6IkhlcnRmb3Jkc2hpcmUiLCJ2YWx1ZSI6ImhlcnRmb3Jkc2hpcmUifSx7ImxhYmVsIjoiSHVsbCIsInZhbHVlIjoiaHVsbCJ9LHsibGFiZWwiOiJJbmdsZWJ5IiwidmFsdWUiOiJpbmdsZWJ5In0seyJsYWJlbCI6Iklwc3dpY2giLCJ2YWx1ZSI6Iklwc3dpY2gifSx7ImxhYmVsIjoiS2VudCIsInZhbHVlIjoia2VudCJ9LHsibGFiZWwiOiJMYW5jYXN0ZXIiLCJ2YWx1ZSI6ImxhbmNhc3RlciJ9LHsibGFiZWwiOiJMZWVkcyIsInZhbHVlIjoibGVlZHMifSx7ImxhYmVsIjoiTGVpZ2giLCJ2YWx1ZSI6ImxlaWdoIn0seyJsYWJlbCI6IkxlaWdodG9uIEJ1enphcmQiLCJ2YWx1ZSI6ImxlaWdodG9uLWJ1enphcmQifSx7ImxhYmVsIjoiTG9uZG9uIiwidmFsdWUiOiJsb25kb24ifSx7ImxhYmVsIjoiTHV0b24iLCJ2YWx1ZSI6Imx1dG9uIn0seyJsYWJlbCI6Ik1hbmNoZXN0ZXIiLCJ2YWx1ZSI6Im1hbmNoZXN0ZXIifSx7ImxhYmVsIjoiTWFuc2ZpZWxkIiwidmFsdWUiOiJtYW5zZmllbGQifSx7ImxhYmVsIjoiTW9yZWNhbWJlIiwidmFsdWUiOiJtb3JlY2FtYmUifSx7ImxhYmVsIjoiTmV3Y2FzdGxlIiwidmFsdWUiOiJuZXdjYXN0bGUifSx7ImxhYmVsIjoiTm9yZm9sayIsInZhbHVlIjoibm9yZm9sayJ9LHsibGFiZWwiOiJOb3JtYW50b24iLCJ2YWx1ZSI6Im5vcm1hbnRvbiJ9LHsibGFiZWwiOiJOb3J0aCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6Im5vcnRoLXlvcmtzaGlyZSJ9LHsibGFiZWwiOiJOb3J0aHdpY2giLCJ2YWx1ZSI6Im5vcnRod2ljaCJ9LHsibGFiZWwiOiJOb3R0aW5naGFtIiwidmFsdWUiOiJub3R0aW5naGFtIn0seyJsYWJlbCI6Ik9sZGhhbSIsInZhbHVlIjoib2xkaGFtIn0seyJsYWJlbCI6Ik9zd2FsZHR3aXN0bGUiLCJ2YWx1ZSI6Ik9zd2FsZHR3aXN0bGUifSx7ImxhYmVsIjoiT3hmb3JkIiwidmFsdWUiOiJveGZvcmQifSx7ImxhYmVsIjoiT3hmb3Jkc2hpcmUiLCJ2YWx1ZSI6Im94Zm9yZHNoaXJlIn0seyJsYWJlbCI6IlBldGVyYm9yb3VnaCIsInZhbHVlIjoicGV0ZXJib3JvdWdoIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJTYWxmb3JkIiwidmFsdWUiOiJzYWxmb3JkIn0seyJsYWJlbCI6IlNoZWZmaWVsZCIsInZhbHVlIjoic2hlZmZpZWxkIn0seyJsYWJlbCI6IlNoZWZmb3JkIiwidmFsdWUiOiJzaGVmZm9yZCJ9LHsibGFiZWwiOiJTdGFmZm9yZHNoaXJlIiwidmFsdWUiOiJzdGFmZm9yZHNoaXJlIn0seyJsYWJlbCI6IlN0b2NrcG9ydCIsInZhbHVlIjoic3RvY2twb3J0In0seyJsYWJlbCI6IlN0b2NrdG9uLW9uLVRlZXMiLCJ2YWx1ZSI6InN0b2NrdG9uLW9uLXRlZXMifSx7ImxhYmVsIjoiV2VzdCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6Indlc3QteW9ya3NoaXJlIn0seyJsYWJlbCI6IldpZ3N0b24iLCJ2YWx1ZSI6IndpZ3N0b24ifSx7ImxhYmVsIjoiV2luZHNvciIsInZhbHVlIjoid2luZHNvciJ9LHsibGFiZWwiOiJXaXJyYWwiLCJ2YWx1ZSI6IndpcnJhbCJ9LHsibGFiZWwiOiJZb3JrIiwidmFsdWUiOiJ5b3JrIn1d'))
            </div>
            <div hidden="" x-ref="slot"></div>
            <div class="relative">
              <div class=" w-full">
                <div class="relative rounded-md ">
                  <div :class="{
                    'pointer-events-none': config.readonly,
                    'cursor-pointer': !config.readonly,
                }" class="cursor-pointer">
                    <template x-if="!config.multiselect">
                      <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                        <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()">
                        </span>
                      </div>
                    </template>
                    <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                      <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()" style="display: none;"></span>
                    </div>
                    <template x-if="config.multiselect">
                      <div class="absolute left-0 inset-y-0 pl-3 pr-14 w-full flex items-center overflow-hidden" x-on:click="toggle">
                        <div class="flex items-center gap-2 overflow-x-auto hide-scrollbar">
                          <span class="inline-flex text-secondary-700 text-sm" x-show="selectedOptions.length" x-text="selectedOptions.length">
                          </span>
                          <div wire:ignore="" class="flex flex-nowrap items-center gap-1">
                            <template x-for="(option, index) in selectedOptions" :key="`selected.${index}`">
                              <span class="
                                                inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium
                                                border border-secondary-200 shadow-sm bg-secondary-100 text-secondary-700
                                            ">
                                <span style="max-width: 5rem" class="truncate" x-text="option.label"></span>
                                <button class="shrink-0 h-4 w-4 flex items-center text-secondary-400 justify-center hover:text-secondary-500" x-on:click.stop="unSelect(option)" tabindex="-1" type="button">
                                  <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                  </svg>
                                </button>
                              </span>
                            </template>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                  <input type="text" autocomplete="disabled"
                    class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none border-transparent focus:border-transparent focus:ring-transparent cursor-pointer overflow-hidden !text-transparent selection:bg-transparent"
                    x-ref="input" x-on:click="toggle" x-on:focus="open" x-on:blur.debounce.750ms="closeIfNotFocused" x-on:keydown.enter.stop.prevent="toggle" x-on:keydown.space.stop.prevent="toggle"
                    x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" x-bind:placeholder="getPlaceholder" x-bind:value="getSelectedValue" inputmode="none"
                    name="location" value="" required="required" id="d5189de027922f81005951e6efe0efd5" placeholder="Select a location">
                  <div class="absolute inset-y-0 right-0 flex items-center pr-2 gap-x-2">
                    <button x-show="!isEmpty()" x-on:click="clear" tabindex="-1" type="button" style="display: none;">
                      <svg class="w-4 h-4 text-secondary-400 hover:text-negative-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>
                    </button>
                    <button tabindex="-1" x-on:click="toggle" type="button">
                      <svg class="w-5 h-5
                            text-secondary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="fixed inset-0 z-20 flex items-end sm:z-10 sm:absolute sm:inset-auto transition-all ease-linear duration-150 sm:w-full" style="display: none" x-show="popover" x-ref="popover" x-on:click.outside="close"
              x-on:keydown.escape.window="handleEscape">
              <div class="fixed inset-0 transition-opacity bg-secondary-400 bg-opacity-60 sm:hidden dark:bg-secondary-700 dark:bg-opacity-60" x-show="popover" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-on:click="close" aria-hidden="true" style="display: none;">
              </div>
              <div class="w-full rounded-t-md sm:rounded-xl border border-secondary-200 bg-white shadow-lg dark:bg-secondary-800 dark:border-secondary-600 transition-all relative overflow-hidden" x-show="popover" tabindex="-1"
                x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" style="display: none;">
                <template x-if="asyncData.api || (config.searchable &amp;&amp; options.length >= 11)">
                  <div class="px-2 my-2" wire:key="search.options.location">
                    <div class=" w-full">
                      <div class="relative rounded-md ">
                        <input type="text" autocomplete="off"
                          class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                          x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                        <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="px-2 my-2" wire:key="search.options.location">
                  <div class=" w-full">
                    <div class="relative rounded-md ">
                      <input type="text" autocomplete="off"
                        class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                        x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                      <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="max-h-64 sm:max-h-60 overflow-y-auto overscroll-contain soft-scrollbar select-none" tabindex="-1" x-ref="optionsContainer" name="wireui.select.options.location"
                  x-on:keydown.tab.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.shift.tab.prevent="getPrevFocusable().focus()"
                  x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()">
                  <div class="w-full h-0.5 rounded-full relative overflow-hidden" :class="{
                    'bg-gray-200': asyncData.fetching
                }">
                    <div class="bg-primary-500 h-0.5 rounded-full absolute animate-linear-progress" style="width: 30%; display: none;" x-show="asyncData.fetching">
                    </div>
                  </div>
                  <ul x-ref="listing" wire:ignore="">
                    <template x-for="(option, index) in displayOptions" :key="`${index}.${option.value}`">
                      <li tabindex="-1" :index="index">
                        <div class="px-2 py-0.5">
                          <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                        </div>
                      </li>
                    </template>
                    <li tabindex="-1" :index="index" index="0">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="1">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="2">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="3">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="4">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="5">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="6">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="7">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="8">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="9">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="10">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="11">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="12">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="13">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="14">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="15">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="16">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="17">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="18">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="19">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="20">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="21">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="22">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="23">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="24">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="25">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="26">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="27">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="28">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="29">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="30">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="31">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="32">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="33">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="34">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="35">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="36">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="37">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="38">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="39">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="40">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="41">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="42">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="43">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="44">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="45">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="46">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="47">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="48">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="49">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="50">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="51">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="52">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="53">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="54">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="55">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="56">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="57">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="58">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="59">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="grow md:rounded-none block bg-white md:bg-transparent p-2 w-full sm:w-auto mb-2 sm:mb-0 rounded-md sm:rounded-none ">
      <div class="flex justify-start items-center align-middle h-full">
        <div class="flex items-center h-full w-full">
          <div class="relative w-full text-sm" x-data="wireui_select({
            })" x-props="{
        asyncData:    JSON.parse(atob('eyJhcGkiOm51bGwsIm1ldGhvZCI6IkdFVCIsInBhcmFtcyI6W10sImFsd2F5c0ZldGNoIjpmYWxzZX0=')),
        optionValue:  'slug',
        optionLabel:  'title',
        optionDescription: null,
        hasSlot:     false,
        multiselect: false,
        searchable:  true,
        clearable:   true,
        readonly:    false,
        placeholder: 'Select an activity',
        template:    null,
    }">
            <div hidden="" x-ref="json">
              JSON.parse(atob('W3sibGFiZWwiOiJBbGwgQWN0aXZpdGllcyIsInZhbHVlIjoiYWxsIn0seyJsYWJlbCI6IkFkdWx0IExlYXJuaW5nIiwidmFsdWUiOiJhZHVsdC1sZWFybmluZyJ9LHsibGFiZWwiOiJBcnQgQ2xhc3NlcyIsInZhbHVlIjoiYXJ0LWNsYXNzZXMifSx7ImxhYmVsIjoiQmFkbWludG9uIiwidmFsdWUiOiJiYWRtaW50b24ifSx7ImxhYmVsIjoiQmFza2V0YmFsbCIsInZhbHVlIjoiYmFza2V0YmFsbCJ9LHsibGFiZWwiOiJDYXIgQm9vdCIsInZhbHVlIjoiY2FyLWJvb3QifSx7ImxhYmVsIjoiQ2hvaXIgR3JvdXBzIiwidmFsdWUiOiJjaG9pci1ncm91cHMifSx7ImxhYmVsIjoiQ2h1cmNoIEdyb3VwcyIsInZhbHVlIjoiY2h1cmNoLWdyb3VwcyJ9LHsibGFiZWwiOiJDb25mZXJlbmNlIiwidmFsdWUiOiJjb25mZXJlbmNlIn0seyJsYWJlbCI6IkNvbnRlbnQiLCJ2YWx1ZSI6ImNvbnRlbnQifSx7ImxhYmVsIjoiQ29udGVudCBDcmVhdGlvbiIsInZhbHVlIjoiY29udGVudC1jcmVhdGlvbiJ9LHsibGFiZWwiOiJDb29raW5nIiwidmFsdWUiOiJjb29raW5nIn0seyJsYWJlbCI6IkNyaWNrZXQiLCJ2YWx1ZSI6ImNyaWNrZXQifSx7ImxhYmVsIjoiRGFuY2UiLCJ2YWx1ZSI6ImRhbmNlIn0seyJsYWJlbCI6IkRyYW1hIiwidmFsdWUiOiJkcmFtYSJ9LHsibGFiZWwiOiJFdmVudHMiLCJ2YWx1ZSI6ImV2ZW50cyJ9LHsibGFiZWwiOiJmaWxtaW5nIiwidmFsdWUiOiJmaWxtaW5nIn0seyJsYWJlbCI6IkZpdG5lc3MiLCJ2YWx1ZSI6ImZpdG5lc3MifSx7ImxhYmVsIjoiRml0bmVzcyBDbGFzc2VzIiwidmFsdWUiOiJmaXRuZXNzLWNsYXNzZXMifSx7ImxhYmVsIjoiRm9vdGJhbGwiLCJ2YWx1ZSI6ImZvb3RiYWxsIn0seyJsYWJlbCI6IkZ1bmVyYWwgV2FrZXMiLCJ2YWx1ZSI6ImZ1bmVyYWwtd2FrZXMifSx7ImxhYmVsIjoiRnV0c2FsIiwidmFsdWUiOiJmdXRzYWwifSx7ImxhYmVsIjoiR3JvdXAgVHJhaW5pbmciLCJ2YWx1ZSI6Imdyb3VwLXRyYWluaW5nIn0seyJsYWJlbCI6IkhvY2tleSIsInZhbHVlIjoiaG9ja2V5In0seyJsYWJlbCI6IkhvbGlkYXkgQ2FtcCIsInZhbHVlIjoiaG9saWRheS1jYW1wIn0seyJsYWJlbCI6IkludGVydmlld3MiLCJ2YWx1ZSI6ImludGVydmlld3MifSx7ImxhYmVsIjoiTGFuZ3VhZ2UgQ2xhc3NlcyIsInZhbHVlIjoibGFuZ3VhZ2UtY2xhc3NlcyJ9LHsibGFiZWwiOiJMZWN0dXJlcyIsInZhbHVlIjoibGVjdHVyZXMifSx7ImxhYmVsIjoiTGlmZSBEcmF3aW5nIiwidmFsdWUiOiJsaWZlLWRyYXdpbmcifSx7ImxhYmVsIjoiTWFydGlhbCBBcnRzIiwidmFsdWUiOiJtYXJ0aWFsLWFydHMifSx7ImxhYmVsIjoiTWVldGluZ3MiLCJ2YWx1ZSI6Im1lZXRpbmdzIn0seyJsYWJlbCI6Ik11c2ljIiwidmFsdWUiOiJtdXNpYyJ9LHsibGFiZWwiOiJOZXRiYWxsIiwidmFsdWUiOiJuZXRiYWxsIn0seyJsYWJlbCI6IlBhcnRpZXMiLCJ2YWx1ZSI6InBhcnRpZXMifSx7ImxhYmVsIjoiUGVyZm9ybWluZyBBcnRzIiwidmFsdWUiOiJwZXJmb3JtaW5nLWFydHMifSx7ImxhYmVsIjoiUHJpdmF0ZSBUdWl0aW9uIiwidmFsdWUiOiJwcml2YXRlLXR1aXRpb24ifSx7ImxhYmVsIjoiUm91bmRlcnMiLCJ2YWx1ZSI6InJvdW5kZXJzIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJSdW5uaW5nIiwidmFsdWUiOiJydW5uaW5nIn0seyJsYWJlbCI6IlNob3dzIiwidmFsdWUiOiJzaG93cyJ9LHsibGFiZWwiOiJTcXVhc2giLCJ2YWx1ZSI6InNxdWFzaCJ9LHsibGFiZWwiOiJTd2ltbWluZyIsInZhbHVlIjoic3dpbW1pbmcifSx7ImxhYmVsIjoiVGFibGUgVGVubmlzIiwidmFsdWUiOiJ0YWJsZS10ZW5uaXMifSx7ImxhYmVsIjoiVGVubmlzIiwidmFsdWUiOiJ0ZW5uaXMifSx7ImxhYmVsIjoiVGhlYXRyZSBHcm91cHMiLCJ2YWx1ZSI6InRoZWF0cmUtZ3JvdXBzIn0seyJsYWJlbCI6IlRyYWluaW5nIiwidmFsdWUiOiJ0cmFpbmluZyJ9LHsibGFiZWwiOiJUcmFtcG9saW5pbmciLCJ2YWx1ZSI6InRyYW1wb2xpbmluZyJ9LHsibGFiZWwiOiJWb2xsZXliYWxsIiwidmFsdWUiOiJ2b2xsZXliYWxsIn0seyJsYWJlbCI6IldhdGVyIFBvbG8iLCJ2YWx1ZSI6IndhdGVyLXBvbG8ifSx7ImxhYmVsIjoiV2VkZGluZyBSZWNlcHRpb25zIiwidmFsdWUiOiJ3ZWRkaW5nLXJlY2VwdGlvbnMifSx7ImxhYmVsIjoiV29yc2hpcCIsInZhbHVlIjoid29yc2hpcCJ9LHsibGFiZWwiOiJZb2dhIiwidmFsdWUiOiJ5b2dhIn1d'))
            </div>
            <div hidden="" x-ref="slot"></div>
            <div class="relative">
              <div class=" w-full">
                <div class="relative rounded-md ">
                  <div :class="{
                    'pointer-events-none': config.readonly,
                    'cursor-pointer': !config.readonly,
                }" class="cursor-pointer">
                    <template x-if="!config.multiselect">
                      <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                        <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()">
                        </span>
                      </div>
                    </template>
                    <div class="absolute left-0 inset-y-0 w-[calc(100%-3.5rem)] flex items-center pl-3.5" x-on:click="toggle">
                      <span class="truncate text-secondary-700 text-sm" x-show="!isEmpty()" x-html="getSelectedDisplayText()"><span>All Activities</span></span>
                    </div>
                    <template x-if="config.multiselect">
                      <div class="absolute left-0 inset-y-0 pl-3 pr-14 w-full flex items-center overflow-hidden" x-on:click="toggle">
                        <div class="flex items-center gap-2 overflow-x-auto hide-scrollbar">
                          <span class="inline-flex text-secondary-700 text-sm" x-show="selectedOptions.length" x-text="selectedOptions.length">
                          </span>
                          <div wire:ignore="" class="flex flex-nowrap items-center gap-1">
                            <template x-for="(option, index) in selectedOptions" :key="`selected.${index}`">
                              <span class="
                                                inline-flex items-center py-0.5 pl-2 pr-0.5 rounded-full text-xs font-medium
                                                border border-secondary-200 shadow-sm bg-secondary-100 text-secondary-700
                                            ">
                                <span style="max-width: 5rem" class="truncate" x-text="option.label"></span>
                                <button class="shrink-0 h-4 w-4 flex items-center text-secondary-400 justify-center hover:text-secondary-500" x-on:click.stop="unSelect(option)" tabindex="-1" type="button">
                                  <svg class="h-3 w-3" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                                  </svg>
                                </button>
                              </span>
                            </template>
                          </div>
                        </div>
                      </div>
                    </template>
                  </div>
                  <input type="text" autocomplete="disabled"
                    class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none border-transparent focus:border-transparent focus:ring-transparent cursor-pointer overflow-hidden !text-transparent selection:bg-transparent"
                    x-ref="input" x-on:click="toggle" x-on:focus="open" x-on:blur.debounce.750ms="closeIfNotFocused" x-on:keydown.enter.stop.prevent="toggle" x-on:keydown.space.stop.prevent="toggle"
                    x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" x-bind:placeholder="getPlaceholder" x-bind:value="getSelectedValue" inputmode="none"
                    name="activity" value="all" required="required" id="69a256025f66e4ce5d15c9dd7225d357" placeholder="Select an activity">
                  <div class="absolute inset-y-0 right-0 flex items-center pr-2 gap-x-2">
                    <button x-show="!isEmpty()" x-on:click="clear" tabindex="-1" type="button">
                      <svg class="w-4 h-4 text-secondary-400 hover:text-negative-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                      </svg>
                    </button>
                    <button tabindex="-1" x-on:click="toggle" type="button">
                      <svg class="w-5 h-5
                            text-secondary-400" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4-4 4 4m0 6l-4 4-4-4"></path>
                      </svg>
                    </button>
                  </div>
                </div>
              </div>
            </div>
            <div class="fixed inset-0 z-20 flex items-end sm:z-10 sm:absolute sm:inset-auto transition-all ease-linear duration-150 sm:w-full" style="display: none" x-show="popover" x-ref="popover" x-on:click.outside="close"
              x-on:keydown.escape.window="handleEscape">
              <div class="fixed inset-0 transition-opacity bg-secondary-400 bg-opacity-60 sm:hidden dark:bg-secondary-700 dark:bg-opacity-60" x-show="popover" x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in duration-200" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" x-on:click="close" aria-hidden="true" style="display: none;">
              </div>
              <div class="w-full rounded-t-md sm:rounded-xl border border-secondary-200 bg-white shadow-lg dark:bg-secondary-800 dark:border-secondary-600 transition-all relative overflow-hidden" x-show="popover" tabindex="-1"
                x-transition:enter="ease-out duration-300" x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100" x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100" x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" style="display: none;">
                <template x-if="asyncData.api || (config.searchable &amp;&amp; options.length >= 11)">
                  <div class="px-2 my-2" wire:key="search.options.activity">
                    <div class=" w-full">
                      <div class="relative rounded-md ">
                        <input type="text" autocomplete="off"
                          class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                          x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                        <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                          <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </template>
                <div class="px-2 my-2" wire:key="search.options.activity">
                  <div class=" w-full">
                    <div class="relative rounded-md ">
                      <input type="text" autocomplete="off"
                        class="placeholder-secondary-400 dark:bg-secondary-800 dark:text-secondary-400 dark:placeholder-secondary-500 border border-secondary-300 focus:ring-primary-500 focus:border-primary-500 dark:border-secondary-600 form-input block w-full sm:text-sm rounded-md transition ease-in-out duration-100 focus:outline-none pr-8 bg-slate-100 sm:text-xs"
                        x-ref="search" x-model.debounce.750ms="search" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()" placeholder="Search here">
                      <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center pointer-events-none
                text-secondary-400">
                        <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="max-h-64 sm:max-h-60 overflow-y-auto overscroll-contain soft-scrollbar select-none" tabindex="-1" x-ref="optionsContainer" name="wireui.select.options.activity"
                  x-on:keydown.tab.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()" x-on:keydown.shift.tab.prevent="getPrevFocusable().focus()"
                  x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()">
                  <div class="w-full h-0.5 rounded-full relative overflow-hidden" :class="{
                    'bg-gray-200': asyncData.fetching
                }">
                    <div class="bg-primary-500 h-0.5 rounded-full absolute animate-linear-progress" style="width: 30%; display: none;" x-show="asyncData.fetching">
                    </div>
                  </div>
                  <ul x-ref="listing" wire:ignore="">
                    <template x-for="(option, index) in displayOptions" :key="`${index}.${option.value}`">
                      <li tabindex="-1" :index="index">
                        <div class="px-2 py-0.5">
                          <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                        </div>
                      </li>
                    </template>
                    <li tabindex="-1" :index="index" index="0">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="1">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="2">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="3">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="4">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="5">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="6">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="7">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="8">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="9">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="10">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="11">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="12">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="13">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="14">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="15">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="16">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="17">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="18">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="19">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="20">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="21">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="22">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="23">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="24">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="25">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="26">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="27">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="28">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="29">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="30">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="31">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="32">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="33">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="34">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="35">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="36">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="37">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="38">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="39">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="40">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="41">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="42">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="43">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="44">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="45">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="46">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="47">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="48">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="49">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="50">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                    <li tabindex="-1" :index="index" index="51">
                      <div class="px-2 py-0.5">
                        <div class="h-8 w-full animate-pulse bg-slate-200 rounded"></div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <button
      class="transition-colors duration-200 border-2 font-semibold rounded-full inline-flex items-center my-5 md:my-3 w-auto justify-center whitespace-nowrap overflow-hidden overflow-ellipsis p-[20px] md:px-[40px] md:py-[13px] bg-complimentary-purple-dark text-white border-complimentary-purple-dark hover:bg-[#6A23AD] hover:border-[#6A23AD]">
      <span>Find a venue</span>
      <span class="">
        <svg class="ml-3 | animateSearch" width="13" height="13" viewBox="0 0 13 13" fill="none">
          <path
            d="M9.06797 9.06845L12.4241 12.4246M10.4104 5.7123C10.4104 8.30727 8.30679 10.4109 5.71181 10.4109C3.11683 10.4109 1.01318 8.30727 1.01318 5.7123C1.01318 3.11732 3.11683 1.01367 5.71181 1.01367C8.30679 1.01367 10.4104 3.11732 10.4104 5.7123Z"
            stroke="currentColor" stroke-width="1.00685" stroke-linecap="round" stroke-linejoin="round"></path>
        </svg>
      </span>
    </button>
  </div>
</form>

Text Content

This website stores cookies on your computer. These cookies are used to improve
your website experience and provide more personalized services to you, both on
this website and through other media. To find out more about the cookies we use,
see our Privacy Policy.

We won't track your information when you visit our site. But in order to comply
with your preferences, we'll have to use just one tiny cookie so that you're not
asked to make this choice again.

Accept Decline
List your school About us Our partners News and Blog Contact us
Book now
My Account

List your school About us Our partners News and Blog Contact us
Book now
My Account


GET TOGETHER...


FIND THE PERFECT VENUE FOR YOUR NEXT GAME, EVENT OR CLASS IN LESS THAN TWO
MINUTES.

   
 * Postcode
 * Location

JSON.parse(atob('W3sibGFiZWwiOiJBbGwgQWN0aXZpdGllcyIsInZhbHVlIjoiYWxsIn0seyJsYWJlbCI6IkFkdWx0IExlYXJuaW5nIiwidmFsdWUiOiJhZHVsdC1sZWFybmluZyJ9LHsibGFiZWwiOiJBcnQgQ2xhc3NlcyIsInZhbHVlIjoiYXJ0LWNsYXNzZXMifSx7ImxhYmVsIjoiQmFkbWludG9uIiwidmFsdWUiOiJiYWRtaW50b24ifSx7ImxhYmVsIjoiQmFza2V0YmFsbCIsInZhbHVlIjoiYmFza2V0YmFsbCJ9LHsibGFiZWwiOiJDYXIgQm9vdCIsInZhbHVlIjoiY2FyLWJvb3QifSx7ImxhYmVsIjoiQ2hvaXIgR3JvdXBzIiwidmFsdWUiOiJjaG9pci1ncm91cHMifSx7ImxhYmVsIjoiQ2h1cmNoIEdyb3VwcyIsInZhbHVlIjoiY2h1cmNoLWdyb3VwcyJ9LHsibGFiZWwiOiJDb25mZXJlbmNlIiwidmFsdWUiOiJjb25mZXJlbmNlIn0seyJsYWJlbCI6IkNvbnRlbnQiLCJ2YWx1ZSI6ImNvbnRlbnQifSx7ImxhYmVsIjoiQ29udGVudCBDcmVhdGlvbiIsInZhbHVlIjoiY29udGVudC1jcmVhdGlvbiJ9LHsibGFiZWwiOiJDb29raW5nIiwidmFsdWUiOiJjb29raW5nIn0seyJsYWJlbCI6IkNyaWNrZXQiLCJ2YWx1ZSI6ImNyaWNrZXQifSx7ImxhYmVsIjoiRGFuY2UiLCJ2YWx1ZSI6ImRhbmNlIn0seyJsYWJlbCI6IkRyYW1hIiwidmFsdWUiOiJkcmFtYSJ9LHsibGFiZWwiOiJFdmVudHMiLCJ2YWx1ZSI6ImV2ZW50cyJ9LHsibGFiZWwiOiJmaWxtaW5nIiwidmFsdWUiOiJmaWxtaW5nIn0seyJsYWJlbCI6IkZpdG5lc3MiLCJ2YWx1ZSI6ImZpdG5lc3MifSx7ImxhYmVsIjoiRml0bmVzcyBDbGFzc2VzIiwidmFsdWUiOiJmaXRuZXNzLWNsYXNzZXMifSx7ImxhYmVsIjoiRm9vdGJhbGwiLCJ2YWx1ZSI6ImZvb3RiYWxsIn0seyJsYWJlbCI6IkZ1bmVyYWwgV2FrZXMiLCJ2YWx1ZSI6ImZ1bmVyYWwtd2FrZXMifSx7ImxhYmVsIjoiRnV0c2FsIiwidmFsdWUiOiJmdXRzYWwifSx7ImxhYmVsIjoiR3JvdXAgVHJhaW5pbmciLCJ2YWx1ZSI6Imdyb3VwLXRyYWluaW5nIn0seyJsYWJlbCI6IkhvY2tleSIsInZhbHVlIjoiaG9ja2V5In0seyJsYWJlbCI6IkhvbGlkYXkgQ2FtcCIsInZhbHVlIjoiaG9saWRheS1jYW1wIn0seyJsYWJlbCI6IkludGVydmlld3MiLCJ2YWx1ZSI6ImludGVydmlld3MifSx7ImxhYmVsIjoiTGFuZ3VhZ2UgQ2xhc3NlcyIsInZhbHVlIjoibGFuZ3VhZ2UtY2xhc3NlcyJ9LHsibGFiZWwiOiJMZWN0dXJlcyIsInZhbHVlIjoibGVjdHVyZXMifSx7ImxhYmVsIjoiTGlmZSBEcmF3aW5nIiwidmFsdWUiOiJsaWZlLWRyYXdpbmcifSx7ImxhYmVsIjoiTWFydGlhbCBBcnRzIiwidmFsdWUiOiJtYXJ0aWFsLWFydHMifSx7ImxhYmVsIjoiTWVldGluZ3MiLCJ2YWx1ZSI6Im1lZXRpbmdzIn0seyJsYWJlbCI6Ik11c2ljIiwidmFsdWUiOiJtdXNpYyJ9LHsibGFiZWwiOiJOZXRiYWxsIiwidmFsdWUiOiJuZXRiYWxsIn0seyJsYWJlbCI6IlBhcnRpZXMiLCJ2YWx1ZSI6InBhcnRpZXMifSx7ImxhYmVsIjoiUGVyZm9ybWluZyBBcnRzIiwidmFsdWUiOiJwZXJmb3JtaW5nLWFydHMifSx7ImxhYmVsIjoiUHJpdmF0ZSBUdWl0aW9uIiwidmFsdWUiOiJwcml2YXRlLXR1aXRpb24ifSx7ImxhYmVsIjoiUm91bmRlcnMiLCJ2YWx1ZSI6InJvdW5kZXJzIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJSdW5uaW5nIiwidmFsdWUiOiJydW5uaW5nIn0seyJsYWJlbCI6IlNob3dzIiwidmFsdWUiOiJzaG93cyJ9LHsibGFiZWwiOiJTcXVhc2giLCJ2YWx1ZSI6InNxdWFzaCJ9LHsibGFiZWwiOiJTd2ltbWluZyIsInZhbHVlIjoic3dpbW1pbmcifSx7ImxhYmVsIjoiVGFibGUgVGVubmlzIiwidmFsdWUiOiJ0YWJsZS10ZW5uaXMifSx7ImxhYmVsIjoiVGVubmlzIiwidmFsdWUiOiJ0ZW5uaXMifSx7ImxhYmVsIjoiVGhlYXRyZSBHcm91cHMiLCJ2YWx1ZSI6InRoZWF0cmUtZ3JvdXBzIn0seyJsYWJlbCI6IlRyYWluaW5nIiwidmFsdWUiOiJ0cmFpbmluZyJ9LHsibGFiZWwiOiJUcmFtcG9saW5pbmciLCJ2YWx1ZSI6InRyYW1wb2xpbmluZyJ9LHsibGFiZWwiOiJWb2xsZXliYWxsIiwidmFsdWUiOiJ2b2xsZXliYWxsIn0seyJsYWJlbCI6IldhdGVyIFBvbG8iLCJ2YWx1ZSI6IndhdGVyLXBvbG8ifSx7ImxhYmVsIjoiV2VkZGluZyBSZWNlcHRpb25zIiwidmFsdWUiOiJ3ZWRkaW5nLXJlY2VwdGlvbnMifSx7ImxhYmVsIjoiV29yc2hpcCIsInZhbHVlIjoid29yc2hpcCJ9LHsibGFiZWwiOiJZb2dhIiwidmFsdWUiOiJ5b2dhIn1d'))

All Activities


   
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Find a venue
JSON.parse(atob('W3sibGFiZWwiOiJBY2NyaW5ndG9uIiwidmFsdWUiOiJBY2NyaW5ndG9uIn0seyJsYWJlbCI6IkFsdHJpbmNoYW0iLCJ2YWx1ZSI6ImFsdHJpbmNoYW0ifSx7ImxhYmVsIjoiQmlybWluZ2hhbSIsInZhbHVlIjoiYmlybWluZ2hhbSJ9LHsibGFiZWwiOiJCbGFja3Bvb2wiLCJ2YWx1ZSI6ImJsYWNrcG9vbCJ9LHsibGFiZWwiOiJCb2x0b24iLCJ2YWx1ZSI6ImJvbHRvbiJ9LHsibGFiZWwiOiJCb3VybmUgRW5kIiwidmFsdWUiOiJib3VybmUtZW5kIn0seyJsYWJlbCI6IkJyYWRmb3JkIiwidmFsdWUiOiJicmFkZm9yZCJ9LHsibGFiZWwiOiJCcmlzdG9sIiwidmFsdWUiOiJicmlzdG9sIn0seyJsYWJlbCI6IkNhbWJyaWRnZSIsInZhbHVlIjoiY2FtYnJpZGdlIn0seyJsYWJlbCI6IkNhbnRlcmJ1cnkiLCJ2YWx1ZSI6ImNhbnRlcmJ1cnkifSx7ImxhYmVsIjoiQ2F0Zm9yZCIsInZhbHVlIjoiY2F0Zm9yZCJ9LHsibGFiZWwiOiJDaGVzdGVyZmllbGQiLCJ2YWx1ZSI6ImNoZXN0ZXJmaWVsZCJ9LHsibGFiZWwiOiJDb3Jud2FsbCIsInZhbHVlIjoiY29ybndhbGwifSx7ImxhYmVsIjoiRGFydGZvcmQiLCJ2YWx1ZSI6ImRhcnRmb3JkIn0seyJsYWJlbCI6IkRhdmVudHJ5IiwidmFsdWUiOiJkYXZlbnRyeSJ9LHsibGFiZWwiOiJEZXJieSIsInZhbHVlIjoiZGVyYnkifSx7ImxhYmVsIjoiRG9uY2FzdGVyIiwidmFsdWUiOiJkb25jYXN0ZXIifSx7ImxhYmVsIjoiRHVyaGFtIiwidmFsdWUiOiJkdXJoYW0ifSx7ImxhYmVsIjoiRWFzdCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6ImVhc3QteW9ya3NoaXJlIn0seyJsYWJlbCI6IkVuZmllbGQiLCJ2YWx1ZSI6ImVuZmllbGQifSx7ImxhYmVsIjoiRXNzZXgiLCJ2YWx1ZSI6IkVzc2V4In0seyJsYWJlbCI6IkhhbGlmYXgiLCJ2YWx1ZSI6ImhhbGlmYXgifSx7ImxhYmVsIjoiSGF5ZXMiLCJ2YWx1ZSI6ImhheWVzIn0seyJsYWJlbCI6IkhlcnRmb3Jkc2hpcmUiLCJ2YWx1ZSI6ImhlcnRmb3Jkc2hpcmUifSx7ImxhYmVsIjoiSHVsbCIsInZhbHVlIjoiaHVsbCJ9LHsibGFiZWwiOiJJbmdsZWJ5IiwidmFsdWUiOiJpbmdsZWJ5In0seyJsYWJlbCI6Iklwc3dpY2giLCJ2YWx1ZSI6Iklwc3dpY2gifSx7ImxhYmVsIjoiS2VudCIsInZhbHVlIjoia2VudCJ9LHsibGFiZWwiOiJMYW5jYXN0ZXIiLCJ2YWx1ZSI6ImxhbmNhc3RlciJ9LHsibGFiZWwiOiJMZWVkcyIsInZhbHVlIjoibGVlZHMifSx7ImxhYmVsIjoiTGVpZ2giLCJ2YWx1ZSI6ImxlaWdoIn0seyJsYWJlbCI6IkxlaWdodG9uIEJ1enphcmQiLCJ2YWx1ZSI6ImxlaWdodG9uLWJ1enphcmQifSx7ImxhYmVsIjoiTG9uZG9uIiwidmFsdWUiOiJsb25kb24ifSx7ImxhYmVsIjoiTHV0b24iLCJ2YWx1ZSI6Imx1dG9uIn0seyJsYWJlbCI6Ik1hbmNoZXN0ZXIiLCJ2YWx1ZSI6Im1hbmNoZXN0ZXIifSx7ImxhYmVsIjoiTWFuc2ZpZWxkIiwidmFsdWUiOiJtYW5zZmllbGQifSx7ImxhYmVsIjoiTW9yZWNhbWJlIiwidmFsdWUiOiJtb3JlY2FtYmUifSx7ImxhYmVsIjoiTmV3Y2FzdGxlIiwidmFsdWUiOiJuZXdjYXN0bGUifSx7ImxhYmVsIjoiTm9yZm9sayIsInZhbHVlIjoibm9yZm9sayJ9LHsibGFiZWwiOiJOb3JtYW50b24iLCJ2YWx1ZSI6Im5vcm1hbnRvbiJ9LHsibGFiZWwiOiJOb3J0aCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6Im5vcnRoLXlvcmtzaGlyZSJ9LHsibGFiZWwiOiJOb3J0aHdpY2giLCJ2YWx1ZSI6Im5vcnRod2ljaCJ9LHsibGFiZWwiOiJOb3R0aW5naGFtIiwidmFsdWUiOiJub3R0aW5naGFtIn0seyJsYWJlbCI6Ik9sZGhhbSIsInZhbHVlIjoib2xkaGFtIn0seyJsYWJlbCI6Ik9zd2FsZHR3aXN0bGUiLCJ2YWx1ZSI6Ik9zd2FsZHR3aXN0bGUifSx7ImxhYmVsIjoiT3hmb3JkIiwidmFsdWUiOiJveGZvcmQifSx7ImxhYmVsIjoiT3hmb3Jkc2hpcmUiLCJ2YWx1ZSI6Im94Zm9yZHNoaXJlIn0seyJsYWJlbCI6IlBldGVyYm9yb3VnaCIsInZhbHVlIjoicGV0ZXJib3JvdWdoIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJTYWxmb3JkIiwidmFsdWUiOiJzYWxmb3JkIn0seyJsYWJlbCI6IlNoZWZmaWVsZCIsInZhbHVlIjoic2hlZmZpZWxkIn0seyJsYWJlbCI6IlNoZWZmb3JkIiwidmFsdWUiOiJzaGVmZm9yZCJ9LHsibGFiZWwiOiJTdGFmZm9yZHNoaXJlIiwidmFsdWUiOiJzdGFmZm9yZHNoaXJlIn0seyJsYWJlbCI6IlN0b2NrcG9ydCIsInZhbHVlIjoic3RvY2twb3J0In0seyJsYWJlbCI6IlN0b2NrdG9uLW9uLVRlZXMiLCJ2YWx1ZSI6InN0b2NrdG9uLW9uLXRlZXMifSx7ImxhYmVsIjoiV2VzdCBZb3Jrc2hpcmUiLCJ2YWx1ZSI6Indlc3QteW9ya3NoaXJlIn0seyJsYWJlbCI6IldpZ3N0b24iLCJ2YWx1ZSI6IndpZ3N0b24ifSx7ImxhYmVsIjoiV2luZHNvciIsInZhbHVlIjoid2luZHNvciJ9LHsibGFiZWwiOiJXaXJyYWwiLCJ2YWx1ZSI6IndpcnJhbCJ9LHsibGFiZWwiOiJZb3JrIiwidmFsdWUiOiJ5b3JrIn1d'))


   
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

JSON.parse(atob('W3sibGFiZWwiOiJBbGwgQWN0aXZpdGllcyIsInZhbHVlIjoiYWxsIn0seyJsYWJlbCI6IkFkdWx0IExlYXJuaW5nIiwidmFsdWUiOiJhZHVsdC1sZWFybmluZyJ9LHsibGFiZWwiOiJBcnQgQ2xhc3NlcyIsInZhbHVlIjoiYXJ0LWNsYXNzZXMifSx7ImxhYmVsIjoiQmFkbWludG9uIiwidmFsdWUiOiJiYWRtaW50b24ifSx7ImxhYmVsIjoiQmFza2V0YmFsbCIsInZhbHVlIjoiYmFza2V0YmFsbCJ9LHsibGFiZWwiOiJDYXIgQm9vdCIsInZhbHVlIjoiY2FyLWJvb3QifSx7ImxhYmVsIjoiQ2hvaXIgR3JvdXBzIiwidmFsdWUiOiJjaG9pci1ncm91cHMifSx7ImxhYmVsIjoiQ2h1cmNoIEdyb3VwcyIsInZhbHVlIjoiY2h1cmNoLWdyb3VwcyJ9LHsibGFiZWwiOiJDb25mZXJlbmNlIiwidmFsdWUiOiJjb25mZXJlbmNlIn0seyJsYWJlbCI6IkNvbnRlbnQiLCJ2YWx1ZSI6ImNvbnRlbnQifSx7ImxhYmVsIjoiQ29udGVudCBDcmVhdGlvbiIsInZhbHVlIjoiY29udGVudC1jcmVhdGlvbiJ9LHsibGFiZWwiOiJDb29raW5nIiwidmFsdWUiOiJjb29raW5nIn0seyJsYWJlbCI6IkNyaWNrZXQiLCJ2YWx1ZSI6ImNyaWNrZXQifSx7ImxhYmVsIjoiRGFuY2UiLCJ2YWx1ZSI6ImRhbmNlIn0seyJsYWJlbCI6IkRyYW1hIiwidmFsdWUiOiJkcmFtYSJ9LHsibGFiZWwiOiJFdmVudHMiLCJ2YWx1ZSI6ImV2ZW50cyJ9LHsibGFiZWwiOiJmaWxtaW5nIiwidmFsdWUiOiJmaWxtaW5nIn0seyJsYWJlbCI6IkZpdG5lc3MiLCJ2YWx1ZSI6ImZpdG5lc3MifSx7ImxhYmVsIjoiRml0bmVzcyBDbGFzc2VzIiwidmFsdWUiOiJmaXRuZXNzLWNsYXNzZXMifSx7ImxhYmVsIjoiRm9vdGJhbGwiLCJ2YWx1ZSI6ImZvb3RiYWxsIn0seyJsYWJlbCI6IkZ1bmVyYWwgV2FrZXMiLCJ2YWx1ZSI6ImZ1bmVyYWwtd2FrZXMifSx7ImxhYmVsIjoiRnV0c2FsIiwidmFsdWUiOiJmdXRzYWwifSx7ImxhYmVsIjoiR3JvdXAgVHJhaW5pbmciLCJ2YWx1ZSI6Imdyb3VwLXRyYWluaW5nIn0seyJsYWJlbCI6IkhvY2tleSIsInZhbHVlIjoiaG9ja2V5In0seyJsYWJlbCI6IkhvbGlkYXkgQ2FtcCIsInZhbHVlIjoiaG9saWRheS1jYW1wIn0seyJsYWJlbCI6IkludGVydmlld3MiLCJ2YWx1ZSI6ImludGVydmlld3MifSx7ImxhYmVsIjoiTGFuZ3VhZ2UgQ2xhc3NlcyIsInZhbHVlIjoibGFuZ3VhZ2UtY2xhc3NlcyJ9LHsibGFiZWwiOiJMZWN0dXJlcyIsInZhbHVlIjoibGVjdHVyZXMifSx7ImxhYmVsIjoiTGlmZSBEcmF3aW5nIiwidmFsdWUiOiJsaWZlLWRyYXdpbmcifSx7ImxhYmVsIjoiTWFydGlhbCBBcnRzIiwidmFsdWUiOiJtYXJ0aWFsLWFydHMifSx7ImxhYmVsIjoiTWVldGluZ3MiLCJ2YWx1ZSI6Im1lZXRpbmdzIn0seyJsYWJlbCI6Ik11c2ljIiwidmFsdWUiOiJtdXNpYyJ9LHsibGFiZWwiOiJOZXRiYWxsIiwidmFsdWUiOiJuZXRiYWxsIn0seyJsYWJlbCI6IlBhcnRpZXMiLCJ2YWx1ZSI6InBhcnRpZXMifSx7ImxhYmVsIjoiUGVyZm9ybWluZyBBcnRzIiwidmFsdWUiOiJwZXJmb3JtaW5nLWFydHMifSx7ImxhYmVsIjoiUHJpdmF0ZSBUdWl0aW9uIiwidmFsdWUiOiJwcml2YXRlLXR1aXRpb24ifSx7ImxhYmVsIjoiUm91bmRlcnMiLCJ2YWx1ZSI6InJvdW5kZXJzIn0seyJsYWJlbCI6IlJ1Z2J5IiwidmFsdWUiOiJydWdieSJ9LHsibGFiZWwiOiJSdW5uaW5nIiwidmFsdWUiOiJydW5uaW5nIn0seyJsYWJlbCI6IlNob3dzIiwidmFsdWUiOiJzaG93cyJ9LHsibGFiZWwiOiJTcXVhc2giLCJ2YWx1ZSI6InNxdWFzaCJ9LHsibGFiZWwiOiJTd2ltbWluZyIsInZhbHVlIjoic3dpbW1pbmcifSx7ImxhYmVsIjoiVGFibGUgVGVubmlzIiwidmFsdWUiOiJ0YWJsZS10ZW5uaXMifSx7ImxhYmVsIjoiVGVubmlzIiwidmFsdWUiOiJ0ZW5uaXMifSx7ImxhYmVsIjoiVGhlYXRyZSBHcm91cHMiLCJ2YWx1ZSI6InRoZWF0cmUtZ3JvdXBzIn0seyJsYWJlbCI6IlRyYWluaW5nIiwidmFsdWUiOiJ0cmFpbmluZyJ9LHsibGFiZWwiOiJUcmFtcG9saW5pbmciLCJ2YWx1ZSI6InRyYW1wb2xpbmluZyJ9LHsibGFiZWwiOiJWb2xsZXliYWxsIiwidmFsdWUiOiJ2b2xsZXliYWxsIn0seyJsYWJlbCI6IldhdGVyIFBvbG8iLCJ2YWx1ZSI6IndhdGVyLXBvbG8ifSx7ImxhYmVsIjoiV2VkZGluZyBSZWNlcHRpb25zIiwidmFsdWUiOiJ3ZWRkaW5nLXJlY2VwdGlvbnMifSx7ImxhYmVsIjoiV29yc2hpcCIsInZhbHVlIjoid29yc2hpcCJ9LHsibGFiZWwiOiJZb2dhIiwidmFsdWUiOiJ5b2dhIn1d'))

All Activities


   
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

Find a venue


OUR MISSION

We believe nothing is more important than people’s health and happiness.

We want to inspire people everywhere to get the most out of life, bring
communities together and to help schools generate much needed revenue.

Find a venue List your school


PROUD TO BE WORKING WITH...

List your school
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 
 * 

List your school


THE LATEST FROM VIVIFY...


MAKING YOUR SCHOOL ENVIRONMENT MORE ACCESSIBLE, OPEN AND WELCOMING - A
REFLECTION BY ANDREW BLENCH



I had always thought most schools were friendly, open and welcoming places until
I started my current role. But as an outsider, I’ve found some schools can be
unwelcoming and sometimes difficult to engage with! This has made me reflect
upon what it must be like for those engaging with the schools I regularly visit.
I am only visiting for a short period as a consultant, but how do people such as
parents, contractors, inspectors experience the school?

Read More


THE VIVIFY VALUES



blog


INTERNATIONAL VOLUNTEERS DAY




THE LATEST ON VIVIFY SOCIALS...

@vivifyvenues

Strategic partners

2024 ©Vivify Venues. All rights reserved.
 * Community
 * Careers
 * Team
 * Privacy Policy
 * Cookie Policy
 * Terms

 * 
 * 
 * 
 * 
 * 

This website uses cookies to ensure you get the best experience.

View Cookie Policy