{namespace neos=Neos\Neos\ViewHelpers}
{namespace search=Newland\Toubiz\Search\Neos\ViewHelpers}

<f:layout name="Default" />

<f:section name="Content">
    <div
        data-toubiz-search-results
        class="o-container o-container--width-sm my-12">

        <f:form
            action="result"
            actionUri="{search:searchActionUri()}"
            objectName="searchQuery"
            object="{searchQuery}"
            class="tb-search-form"
            additionalAttributes="{
                'data-toubiz-results-list.filter-form': true,
                'data-toubiz-results-list.filter-form.ajax-action': '/toubiz-search/search',
                'data-toubiz-results-list.filter-form.ajax-method': 'GET'
            }">

            <f:form.textfield
                property="queryString"
                class="tb-search-form__input-field"
                placeholder="{f:translate(id: 'label.queryStringPlaceholder', source: 'Views/Searches/Result')}"
                additionalAttributes="{
                    'data-toubiz-ajax.name': 'searchQuery[queryString]',
                    'data-toubiz-search-query': 'data-toubiz-search-query'
                }"/>

            <f:for each="{searchQuery.scopes}" as="scope" iteration="i">
                <f:form.hidden
                        property="scopes.{i.index}"
                        value="{scope}"
                        additionalAttributes="{ 'data-toubiz-ajax.name': 'searchQuery[scopes][]' }" />
            </f:for>

            <f:form.hidden
                    property="language"
                    value="{node.dimensions.language.0}"
                    additionalAttributes="{ 'data-toubiz-ajax.name': 'searchQuery[language]' }" />
            <f:form.hidden
                    name="node"
                    value="{node.contextPath}"
                    additionalAttributes="{ 'data-toubiz-ajax.name': 'node' }" />
            <f:form.hidden
                name="page"
                value="{pagination.page}"
                additionalAttributes="{ 'data-toubiz-ajax.name': 'page', 'data-toubiz-results-list.page': true}" />

            <button class="tb-search-form__submit-button" type="submit">
                <svg class="c-icon c-icon--block" aria-hidden="true" focusable="false">
                   <use xlink:href="#tb-search-icon-search" />
               </svg>
            </button>
        </f:form>

        <f:if condition="{searchResults}">
            <f:then>
                <div class="text-sm text-grey-darker mt-2">
                    <f:translate
                        id="label.searchResultCount"
                        source="Views/Searches/Result"
                        quantity="{pagination.count.total}"
                        arguments="{0: pagination.count.total}" />

                </div>

                <div
                    class="tb-results-container"
                    data-toubiz-results="search"
                    data-toubiz-results-loading="false">

                    <f:render partial="Searches/LoadSkeleton" arguments="{ count: pagination.count.limit }" />

                    <ul
                        class="tb-search-result-list"
                        data-toubiz-results-list
                        aria-label="{f:translate(id: 'label.searchResultsForQueryString', source: 'Views/Searches/Result', arguments: '{0: searchQuery.queryString}')}">

                        <f:for each="{searchResults}" as="searchResult">
                            <neos:standaloneView
                                templatePathAndFilename="{search:partialPath(searchResult: searchResult)}"
                                arguments="{_all}" />

                        </f:for>

                        <f:if condition="{pagination.count.pages} > 1">
                            <f:render partial="Searches/Pagination" arguments="{_all}" />
                        </f:if>
                    </ul>

                    <svg
                        data-toubiz-load-spinner
                        class="c-icon tb-load-spinner text-secondary"
                        aria-hidden="true">

                        <use xlink:href="#tb-search-icon-loading" />
                    </svg>

                </div>
            </f:then>
            <f:else>
                <div class="text-grey-darker mt-2">
                    <p>
                        {f:translate(id: 'label.noResultsFound', source: 'Views/Searches/Result', arguments: '{0: searchQuery.queryString}')}
                    </p>
                </div>
            </f:else>
        </f:if>


    </div>
</f:section>