{% set customer = app.customer_auth() %}
                <div class="py-4 px-2 w-full">             

                    <div>
                        <div class="flex flex-wrap -mx-3 mb-6">
                            <div class="relative w-full md:w-full px-3 mb-2 mt-2 max-w-lg mx-auto">
                                <div class="absolute  inset-y-0 start-0 flex items-center mx-6 pointer-events-none">
                                    <svg class="h-4 w-4 text-gray-500 dark:text-gray-300" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 21 21">
                                        <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                                    </svg>
                                </div>
                                <input rel="nofollow" name="params[title]" value="{{app.params.title}}" type="text" id="voice-search" data-element="search-result-popup" data-form="new-item-form" class="search bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="{{lang.translate('Search for')}}" required />
                                <span class="cursor-pointer absolute inset-y-0 end-0 flex items-center px-6">
                                    {% include 'views/front/streaming/popups/speech-to-text.html.twig' %}
                                    <span class="tooltiptext">{{lang.translate('Search by Voice')}}</span>

                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="border-b border-gray-200 dark:border-gray-700">
                        <ul class="flex flex-wrap -mb-px text-sm font-medium text-center text-gray-500 dark:text-gray-300  mx-auto">
                            {% for menuitem in app.searchMenu %}
                            <li class="me-2 mx-auto">
                            
                                <a href="{{menuitem.link}}?params[title]={{app.params.title}}" class="ajax-load flex gap-2 items-center justify-center p-4 border-b-2 {{ menuitem.link == app.request.pathInfo ? "border-blue-600 text-primary active dark:text-blue-500 dark:border-blue-500" : "border-transparent hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"}} rounded-t-lg  group text-lg">
                                    <img src="/src/front_assets/svg/{{menuitem.icon}}.svg" class="w-6 h-6" />
                                    {{ lang.translate(menuitem.title)}}
                                </a>
                            </li>
                            {% endfor %}
                        </ul>
                    </div>

                    {% include 'views/front/' ~ template ~ '/pages/search/'~ sub_layout ~'.html.twig' %}
                    
                </div>