{namespace f=TYPO3\CMS\Fluid\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<div class="header__search-form" data-ref="jsBoxSearch">
  <form class="form" action="/search" method="get">
    <input type="hidden" name="tx_indexedsearch_pi2[action]" value="search" />
    <input type="hidden" name="tx_indexedsearch_pi2[search][searchType]" value="0" />
    <input type="hidden" name="tx_indexedsearch_pi2[search][sortOrder]" value="rank_flag" />
    <input type="hidden" name="tx_indexedsearch_pi2[search][sortDesc]" value="0" />
    <input type="text" name="tx_indexedsearch_pi2[search][sword]" class="form-input" data-ref="jsBoxSearchInput" placeholder="{f:translate(key: 'search.placeholder', extensionName: 'zab_site')}" aria-label="{f:translate(key: 'search.placeholder', extensionName: 'zab_site')}" />
    <button type="submit" class="form-btn" aria-label="{f:translate(key:'search.label', extensionName:'zab_site')}"></button>
  </form>

  <f:if condition="{headerMostSearched}">
  <div class="header__search-form-most">
    <f:variable name="titleSearched" value="{f:translate(key:'search.searched.terms', extensionName:'zab_site')}" />
    <h6>{titleSearched}</h6>
    <ul class="header__search-form-most-list">
      <f:for each="{headerMostSearched -> v:iterator.explode(glue: '|')}" as="item">
        <li>
          <button class="btn-link" data-refs="jsMostWords" data-word="{item}">{item}</button>
        </li>
      </f:for>
    </ul>
  </div>
  </f:if>

</div>