{% set searchQuery = craft.app.request.getParam('query') %}
{% set searchFilter = craft.app.request.getParam('filter') %}

<section class="generic-search-header-panel w-full relative bg-brand-terracotta-aa">
    <div class="container-wrapper max-w-7xl mx-auto">
        <div class="padding-wrapper px-6 sm:px-8 lg:px-10 py-8 sm:py-10 lg:py-12 xl:py-16">
            <div class="content-wrapper w-full flex flex-col justify-center items-center">
                <div class="header-wrapper">
                    <h1 class="font-header text-white-pure font-semibold text-4xl lg:text-5xl">
                        Search
                    </h1>
                </div>
                <div class="search-wrapper w-full max-w-120 lg:max-w-140 xl:max-w-160 flex flex-col justify-start items-start mt-2 sm:mt-4 lg:mt-6">
                    <div class="padding-wrapper w-full h-full p-6 sm:p-8">
                        <div class="search-input w-full flex flex-row justify-start items-center">
                            <div class="inner-wrapper w-full relative flex flex-row justify-start items-center">
                                {# The search bar #}
                                <form id="searchPageForm" data-filter="{{ searchFilter }}" class="w-full relative rounded-full" action="/search?query={{ searchQuery }}&page=1&filter={{ searchFilter }}" method="post">
                                    <label class="sr-only" for="searchPageInput">Search</label>
                                    <input id="searchPageInput" value="{{ searchQuery }}" type="search" placeholder="What are you looking for?" class="bg-white-primary w-full h-14 sm:h-16 pl-6 sm:pl-8 font-body font-normal text-lg text-black-primary placeholder:text-gray-400 border-2 border-solid border-brand-terracotta-aaa rounded-full transition-colors duration-300 placeholder:transition-colors placeholder:duration-300 active:ring-brand-terracotta-i active:ring-2 active:ring-offset-2 focus:ring-brand-terracotta-i focus:ring-2 focus:ring-offset-2" />
                                    <button id="searchPageSubmit" class="search-page-submit absolute top-2 right-2 w-10 sm:w-12 h-10 sm:h-12 flex justify-center items-center rounded-full bg-brand-terracotta-aa" type="submit">
                                        {{ svg(svgPath ~ '/core/search-icon-thick.svg') | attr({ class: 'w-4 sm:w-5 text-white-pure' }) }}
                                    </button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>