{% set searchRandomID = random() %}


<form action="/" method="post" class="searchForm {{ class }}" autocomplete="off">

    <search action="/shop/browse/autocomplete.php" inline-template>

        <div class="searchWrap" v-bind:class="{ dropdownVisible: term != ''}">

            <div class="row" v-bind:class="{ inputFocus: term != '' }">

                
                <label class="visuallyHidden" for="searchinput-{{ searchRandomID }}">Search treatments and conditions</label>
                
                <input type="hidden"
                       name="search-filter-page"
                       value="true"
                />

                <input type="search"
                       name="search-filter"
                       id="searchinput-{{ searchRandomID }}"
                       v-model="term"
                       placeholder="{% if placeholder is not empty %}{{ placeholder }}{% else %}Search: e.g Hair loss{% endif %}"
                       @keyup="search()"
                       @focus="closeMainMenu()"
                       class="text searchinput"
                       v-bind:class="{ searchOpen: term != ''}"
                />

                <button
                        type="button"
                        class="searchIcon {% if show_full_button is not empty %}fullButton{% endif %} {% if disable_button is not empty %}buttonDisabled{% endif %}"
                        @click="term = ''"
                >
                    <i class="magnifySearchIcon svgIcon" v-if="term == ''">
                        {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/search.svg')|raw }}
                    </i>
                    <i class="svgIcon" v-if="term != ''">
                        {{ file_get_contents(settings.SITE_PATH ~ settings.THEME_URL ~ '/images/icons/close.svg')|raw }}
                    </i>
                </button>

            </div> <!-- .row -->

            <div class="searchResults" v-bind:class="{ searchResultsVisible: term != '' }" v-cloak>

                <div class="innerScroller">

                    <div class="productsResults" v-if="!searching && results.products.length > 0">

                        <h5 class="resultsTitle">Related Treatments</h5>

                        <ul>

                            <li v-for="product in results.products">

                                <a :href="product.url">

                                    <div class="imageWrap" v-if="product.image">
                                        <img :src="product.image" :alt="product.name">
                                    </div> <!-- .imageWrap -->

                                    <div class="productInfo">

                                        <h3 class="productName" v-html="product.name">

                                        </h3>

                                        <div class="productPrice">
                                            <span v-if="product.no_sizes == false">From</span> &pound;[% formatPrice(product.price)%]
                                        </div> <!-- .productPrice -->

                                    </div>  <!-- .productInfo -->
                                </a>

                            </li>

                        </ul>

                        <a :href="results.browse_url" class="button">View All</a>

                    </div> <!-- .productsResults -->

                    <div class="categoryResults" v-if="!searching && results.categories.length > 0">

                        <h5 class="resultsTitle">Conditions</h5>

                        <ul>

                            <li v-for="category in results.categories">
                                <a :href="category.url" v-html="category.name"></a>
                            </li>
                        </ul>

                    </div> <!-- .categoryResults -->

                    <div class="pageResults" v-if="!searching && results.pages.length > 0 && pageResultsEnabled">

                        <h5 class="resultsTitle">Content pages</h5>

                        <ul>
                            <li v-for="page in results.pages">
                                <a :href="page.url" v-html="page.title"></a>
                            </li>
                        </ul>

                    </div> <!-- .pageResults -->

                    <div class="brandResults" v-if="!searching && results.brands.length > 0 && brandResultsEnabled">

                        <h5 class="resultsTitle">Brands</h5>

                        <ul>
                            <li v-for="brand in results.brands">
                                <a :href="brand.url" v-html="brand.name"></a>
                            </li>
                        </ul>

                    </div><!-- .brandResults -->

                    <div class="noResults" v-if="!searching && results.categories.length < 1 && results.products.length < 1 && results.brands.length < 1 && results.pages.length < 1">
                        <h5 class="resultsTitle">No Results found</h5>
                    </div> <!-- .noResults -->

                    <div class="noResults" v-if="searching">
                        <h5 class="resultsTitle searchingText">Searching</h5>
                    </div> <!-- .noResults -->

                </div> <!-- .innerScroller -->

            </div> <!-- .searchResults -->

        </div>

    </search>

</form> <!-- .searchForm -->
