---
product_results:
    limit: {{theme_settings.searchpage_products_per_page}}
---
{{inject 'categoryTree' forms.search.category_options}}
{{inject 'searchProductsPerPage' theme_settings.searchpage_products_per_page}}
{{#partial "head"}}
    {{#if pagination.product_results.previous}}
        <link rel="prev" href="{{pagination.product_results.previous}}">
    {{/if}}
    {{#if pagination.product_results.next}}
        <link rel="next" href="{{pagination.product_results.next}}">
    {{/if}}
{{/partial}}

{{#partial "page"}}
{{> components/common/breadcrumbs breadcrumbs=breadcrumbs}}
{{{snippet 'search'}}}
<section class="nav">
    {{#if forms.search.query}}
        <div id="search-results-heading">
            {{>components/search/heading}}
        </div>
    {{/if}}
    <nav class="navBar navBar--sub">
        <ul class="navBar-section account-navigation">
            <li class="navBar-item">
                <a id="search-results-product-count" class="navBar-action" href="{{forms.search.product_url}}" data-product-results-toggle>
                    {{>components/search/product-count}}
                </a>
            </li>
            <li class="navBar-item">
                <a class="navBar-action" href="{{forms.search.content_url}}" data-content-results-toggle>
                    {{lang 'search.results.content_count' count=pagination.content_results.total}}
                </a>
            </li>
            {{#unless product_results.faceted_search_enabled}}
                <li class="navBar-item navBar-item--separate">
                    <a class="navBar-action toggleLink" data-collapsible="advanced-search-content" href="#" aria-controls="advanced-search-content" aria-expanded="false">
                        <span class="toggleLink-text toggleLink-text--on">
                            {{lang 'forms.search.hide'}}
                        </span>
                        <span class="toggleLink-text toggleLink-text--off">
                            {{lang 'forms.search.show'}}
                        </span>
                    </a>
                </li>
            {{/unless}}
        </ul>
    </nav>
    {{#unless product_results.faceted_search_enabled}}
        {{>components/search/advanced-search}}
    {{/unless}}
</section>

<section class="page">
    {{#if product_results.products}}
        {{#if product_results.faceted_search_enabled}}
            <aside class="page-sidebar{{#if forms.search.section '!=' 'product'}} u-hiddenVisually{{/if}}" id="faceted-search-container">
                {{> components/faceted-search/index product_results}}
            </aside>
        {{/if}}
        <main class="page-content">
    {{else}}
        <main class="page-content page-content--centered">
    {{/if}}
        {{#if forms.search.has_suggestions}}
            <div class="panel panel--large">
                <div class="panel-body">
                    {{#if forms.search.suggested_query}}
                        <div class="search-suggestion">
                            {{lang 'forms.search.did_you_mean'}} <strong>{{forms.search.suggested_query.query}}</strong>
                            <a href="{{forms.search.suggested_query.url}}" class="search-refine">{{lang 'forms.search.refine'}}</a>
                        </div>

                        {{#if result_count '===' 0}}
                            <div class="search-suggestion">
                                <p>
                                    {{lang 'forms.search.your_search_for'}}
                                    "<strong>{{forms.search.query}}</strong>"
                                    {{lang 'forms.search.no_match'}}
                                </p>
                            </div>
                        {{/if}}
                    {{/if}}

                    {{#if category_results.length}}
                        <div class="search-suggestion">
                            <h5 class="suggestion-title">{{lang 'forms.search.categories'}}</h5>
                            <ul class="category-suggestion-list">

                                {{#each category_results}}
                                <li class="category-suggestion">

                                    {{#each this}}
                                        <a href="{{url}}">{{name}}</a>
                                        {{#unless @last}} > {{/unless}}
                                    {{/each}}

                                </li>
                                {{/each}}
                            </ul>
                        </div>
                    {{/if}}

                    {{#if brand_results.length}}
                        <div class="search-suggestion">
                            <h5 class="suggestion-title">{{lang 'forms.search.brand'}}</h5>
                            {{#each brand_results}}
                                <a href="{{url}}">{{name}}</a>
                                {{#unless @last}}, {{/unless}}
                            {{/each}}
                        </div>
                    {{/if}}

                    {{#if result_count '===' 0}}
                        <div class="search-suggestion">
                            <h5 class="suggestion-title">{{lang 'forms.search.suggestions.title'}}</h5>
                            <ul>
                                <li>{{lang 'forms.search.suggestions.line1'}}</li>
                                <li>{{lang 'forms.search.suggestions.line2'}}</li>
                                <li>{{lang 'forms.search.suggestions.line3'}}</li>
                            </ul>
                        </div>
                    {{/if}}
                </div>
            </div>
        {{/if}}

        {{#if content_results}}
            <div id="search-results-content" {{#if forms.search.section '!=' 'content'}}class="u-hiddenVisually"{{/if}}>
                {{> components/search/content-sort-box sort=pagination.content_results.sort}}
                <ul>
                    {{#each content_results}}
                        <strong><a href="{{url}}">{{{title}}}</a></strong>({{type}})
                        <p>{{{content}}}</p>
                    {{/each}}
                </ul>
                {{> components/common/paginator pagination.content_results reload=true}}
            </div>

        {{/if}}

        <div id="product-listing-container" {{#if forms.search.section '!=' 'product'}}class="u-hiddenVisually"{{/if}}>
            {{> components/search/product-listing}}
        </div>
    </main>
</section>

{{/partial}}
{{> layout/base}}