{namespace f=TYPO3\CMS\Fluid\ViewHelpers}
{namespace is=TYPO3\CMS\IndexedSearch\ViewHelpers}
{namespace zab=Zab\ZabSite\ViewHelpers}

<f:asset.script identifier="indexed_search_pagination" src="EXT:indexed_search/Resources/Public/JavaScript/pagination.js" />

<section id="{zab:contentElementData(field: 'pid')}" class="search-page" data-block="search" aria-label="{zab:contentElementData(field: 'header')}">
  <div class="grid-container">
    <div class="search-page__heading">
      <f:variable name="searchTitle">{zab:contentElementData(field: 'header')}</f:variable>
      <f:if condition="{searchTitle}">
        <h1 class="search-page__heading-title">{searchTitle} <f:if condition="{searchParams.sword}"><f:translate key="search.for" extensionName="zab_site" /> "{searchParams.sword}"</f:if></h1>
      </f:if>

      <f:alias map="{sword: searchParams.sword}">
        <f:render partial="Form" arguments="{_all}" />
      </f:alias>

      <f:for each="{resultsets}" as="result" key="freeIndexUid">
        <f:if condition="{result.count} > 0">
          <div class="search-page__heading-total" aria-live="polite" aria-atomic="true">
          <f:sanitize.html>
            <f:translate key="displayResults" arguments="{0: result.pagination.startRecordNumber, 1: result.pagination.endRecordNumber, 2: result.count}" />
          </f:sanitize.html>
          </div>
        </f:if>
      </f:for>

      <f:if condition="{settings.displayAdvancedSearchLink}">
        <zab:searchFilters sword="{searchParams.sword}" targetPid="{settings.targetPid}" as="searchFilters">
          <f:if condition="{searchFilters}">
          <nav class="search-page__heading-filter" aria-label="{f:translate(key: 'search.aria.filters', extensionName: 'zab_site')}">
            <button type="button" class="search-page__heading-filter-btn var-color-accent{f:if(condition: searchParams.filterPages, else: ' select')}" aria-pressed="{f:if(condition: searchParams.filterPages, then: 'false', else: 'true')}" data-filter-pages="" data-refs="jsFiltBtns"><f:translate key="search.filter.all" extensionName="zab_site" /></button>
            <f:for each="{searchFilters}" as="filter">
              <button type="button" class="search-page__heading-filter-btn var-color-{filter.color}{f:if(condition: filter.isActive, then: ' select')}" aria-pressed="{f:if(condition: filter.isActive, then: 'true', else: 'false')}" data-filter-pages="{filter.filterPages}" data-refs="jsFiltBtns">{filter.title}</button>
            </f:for>
          </nav>
          </f:if>
        </zab:searchFilters>
			</f:if>
    </div>
    
    <f:for each="{resultsets}" as="result" key="freeIndexUid">

    <f:if condition="{result.count} > 0">
      <div class="search-page__results" aria-label="{f:translate(key: 'search.aria.results', extensionName: 'zab_site')}">
        <ol class="search-page__results-list">
          <f:for each="{result.rows}" as="row">
            
          <li class="result-item">
            <!-- title -->
            <f:if condition="{row.item_type} != '0'">
              <f:then>
                <h3 class="result-item-title"> <f:format.raw>{row.item_description}</f:format.raw> </h3>
              </f:then>
              <f:else>
                <h3 class="result-item-title"> <f:format.raw>{row.title}</f:format.raw> </h3>
              </f:else>
            </f:if>
            <!-- description -->
            <f:if condition="{row.description}">
              <f:if condition="{row.item_type} != '0'">
                <f:then>
                  <p class="result-item-description"> <f:format.raw>{row.item_title}</f:format.raw> </p>
                </f:then>
                <f:else>
                  <f:if condition="{zab:pageHasBlock(pageId: row.page_id, block: 'zab_faqslist')}">
                    <f:then>
                      <p class="result-item-description"> <f:translate key="search.faqs.text" extensionName="zab_site" /> </p>
                    </f:then>
                    <f:else>
                      <p class="result-item-description"> <f:format.raw>{row.description}</f:format.raw> </p>
                    </f:else>
                  </f:if>
                </f:else>
              </f:if>
            </f:if>
            <!-- extras -->
            <div class="result-item-row">
              <zab:pageCategories pageUid="{row.page_id}" as="categories">
                <f:for each="{categories}" as="cat">
                  <span class="result-item-cat bg-color-{cat.color}">{cat.title}</span>
                </f:for>
              </zab:pageCategories>
              <f:comment>
                <span class="result-item-date"> <f:format.date>@{row.created}</f:format.date> </span>
              </f:comment>
            </div>
            <!-- links -->
            <f:if condition="{row.item_type} != '0'">
              <f:then>
                <div class="result-item-links">
                  <a href="{row.data_filename}" class="result-item-link btn-link-pdf" download="{row.item_title}">
                    <f:translate key="download.pdf" extensionName="zab_site" />
                  </a>
                </div>
              </f:then>
              <f:else>
                <f:if condition="{row.path}">
                <zab:searchResultAnchors pathUri="{row.pathUri}" pageId="{row.page_id}" sword="{searchParams.sword}" as="searchAnchors">
                <div class="result-item-links">
                  <f:for each="{searchAnchors}" as="anchor">
                  <f:if condition="{anchor.isDirectDownload}">
                    <f:then>
                      <a href="{anchor.uri}" class="result-item-link btn-link-pdf" download="{anchor.filename}">{anchor.filename}</a>
                    </f:then>
                    <f:else>
                      <f:variable name="viewPageLabel"><f:translate key="search.aria.viewPage" extensionName="zab_site" /></f:variable>
                      <f:if condition="{anchor.title}">
                        <f:then>
                          <f:link.typolink parameter="{anchor.uri}" class="result-item-link" additionalAttributes="{aria-label: viewPageLabel}"> {anchor.title} </f:link.typolink>
                        </f:then>
                        <f:else>
                          <f:link.typolink parameter="{anchor.uri}" class="result-item-link btn-link-page" additionalAttributes="{aria-label: viewPageLabel}"> {viewPageLabel} </f:link.typolink>
                        </f:else>             
                      </f:if>
                    </f:else>
                  </f:if>
                  </f:for>
                </div>
                </zab:searchResultAnchors>
                </f:if>
              </f:else>
            </f:if>
          </li>

          </f:for>
        </ol>
      </div>
      <f:if condition="{result.pagination.paginator.numberOfPages} > 1">
      <nav class="search-page__pagination" aria-label="{f:translate(key: 'search.aria.pagination', extensionName: 'zab_site')}">
        <f:render partial="Pagination" arguments="{pagination: result.pagination, searchParams: searchParams, freeIndexUid: freeIndexUid}" />
      </nav>
      </f:if>
    </f:if>

    <f:if condition="{result.count} == 0">
      <f:if condition="{searchParams.sword}">
      <div class="search-page__no-results" role="status" aria-live="polite">
        <p><f:translate key="result.noResult" /></p>
        <zab:searchFuzzySuggestion sword="{searchParams.sword}" searchParams="{searchParams}" as="fuzzySuggestion">
          <f:if condition="{fuzzySuggestion.word}">
            <p class="search-page__no-results-suggestion">
              <f:translate key="search.suggestion" extensionName="zab_site" />
              <a href="{fuzzySuggestion.url}" class="search-page__no-results-suggestion-link">{fuzzySuggestion.word -> f:format.case(mode: 'capital')}</a>
            </p>
          </f:if>
        </zab:searchFuzzySuggestion>
      </div>
      </f:if>
    </f:if>

    </f:for>
  </div>
</section>