{{ search_route = "{{ trans:mwb.searches.search }}" }}
<form class="w-full max-w-screen-md" action="{{ site:url === '/' ? '' : site:url }}/{{ search_route | lower }}">
    <label
        class="inline-flex h-12 w-full self-stretch rounded-lg border-2 border-black/40 transition duration-150 ease-in-out focus-within:border-brand-teal focus-within:shadow-form-focus"
        x-data="{ query: $store.helpers.decodeAndReplace('{{ if show_old_query }}{{ get:q | collapse_whitespace | decode | urlencode }}{{ else }}{{ /if }}') }"
    >
        {{ partial:form/input class="!flex-shrink flex-grow !border-0 rounded-none rounded-l-lg !shadow-none" }}
            {{ slot:attributes }}
                    name="q" type="search" aria-label="{{ trans:mwb.searches.search }}"
                    placeholder="{{ trans:mwb.searches.looking_for }}" x-model="query" :value="query"
            {{ /slot:attributes }}
        {{ /partial:form/input }}
        <button
            type="submit"
            class="btn-filled btn-orange !h-[2.75rem] !min-h-0 !rounded-l-none !rounded-r-lg !border-none !py-0 !font-medium !shadow-none !outline-0 max-xxs:flex-grow max-xxs:!px-0 md:!w-30"
            :disabled="query.length === 0"
        >
            <template x-if="isDesktop()">
                <span>{{ trans:mwb.searches.search }}&nbsp;→</span>
            </template>
            <template x-if="!isDesktop()">
                {{ svg src="images/icons/search.svg" class="fill-white h-[1.875rem] w-[1.875rem]" }}
            </template>
        </button>
    </label>
</form>