{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:variable name="blockID" value="{f:if(condition: data.anchor, then: data.anchor, else: data.uuid)}" />

<section id="{blockID}" class="block-info-hub-list" data-block="info-hub-list">
  <div class="grid-container">
    <div class="block-info-hub-list-top">
      <div class="block-info-hub-list__heading">
        <f:if condition="{data.title}">
        <h1>{data.title}</h1>
        </f:if>
        <f:if condition="{data.info}">
        <p class="text-lg"><f:format.nl2br>{data.info}</f:format.nl2br></p>
        </f:if>
      </div>

      <div class="block-info-hub-list__search">
        <form id="info-hub-form-{data.uuid}" class="searchbox" data-ref="jsForm">
          <div class="searchbox-search">
            <input type="search" id="info-hub-form-{data.uuid}" class="searchbox-search-input" placeholder="{f:translate(key:'search.placeholder', extensionName:'zab_site')}" data-ref="jsFormInput"/>
            <button type="button" class="searchbox-search-btn clean" data-ref="jsBtnClean" aria-label="{f:translate(key:'search.clean', extensionName:'zab_site')}"> </button>
            <button type="submit" class="searchbox-search-btn" data-ref="jsBtnSubmit" aria-label="{f:translate(key:'search.label', extensionName:'zab_site')}"> </button>
          </div>
        </form>
        <div class="block-info-hub-list__search-suggestions" data-ref="jsSuggestions" data-no-results="{f:translate(key:'search.no.results', extensionName:'zab_site')}">
          <div class="block-info-hub-list__search-suggestions-wrap"> <!-- Suggestions --> </div>
        </div>
      </div>
      <div data-ref="jsScrollForTop"></div>
    </div>

    <div class="block-faqs-list-content">
      <div class="block-info-hub-list__selectors">
        <ul class="block-info-hub-list__selectors-box js-header-top">
          <f:for each="{infoHubCategories}" as="cat">
          <li class="category" data-category="{cat.uid}" data-refs="jsCats">
            <button class="category-title" data-refs="jsCatsToggle" aria-expanded="false" aria-controls="category-subs-{cat.uid}">{cat.info-hub_category}</button>
            <ul id="category-subs-{cat.uid}" class="category-subs" role="tablist" aria-hidden="true" inert>
              <f:for each="{infoHubItems}" as="item">
                <f:if condition="{item.info-hub_category.uid} == {cat.uid}">
                <li role="presentation">
                  <button id="btn-{item.uid}"
                    class="btn"
                    role="tab"
                    aria-selected="false"
                    aria-controls="panel-{item.uid}"
                    data-slug="{item.info-hub_slug}"
                    data-refs="jsBtn"
                  >
                    {item.info-hub_title}
                  </button>
                </li>
                </f:if>
              </f:for>
            </ul>
          </li>
          </f:for>
        </ul>
      </div>
      <div class="block-info-hub-list__contents" data-ref="jsContents">
        <f:for each="{infoHubItems}" as="info" iteration="i">
          <div id="panel-{info.uid}" 
            class="panel"
            role="tabpanel"
            aria-labelledby="btn-{info.uid}"
            aria-hidden="true"
            data-panel="{info.uid}"
            data-refs="jsInfos"
            tabindex="-1"
            inert
          >
            <div class="contents">
              <f:if condition="info.infohub_content">
                <f:render section="infohub-content" arguments="{content: info.infohub_content}" />
                
                <f:comment>
                <!-- DO DELETE -->
                <f:else>
                  <div class="wysiwyg">
                    <f:format.html>{info.info-hub_info}</f:format.html>
                  </div>
                  <f:if condition="{info.downloads_records}">
                    <f:for each="{info.downloads_records}" as="item">
                      <f:render partial="DownloadCard" arguments="{item: item}" />
                    </f:for>
                  </f:if>
                </f:else>
                </f:comment>

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


<f:section name="infohub-content">
  <f:for each="{content}" as="block">
    <f:if condition="({block.type} == 'text')">
      <div class="wysiwyg">
        <f:format.html>{block.wysiwyg}</f:format.html>
      </div>
    </f:if>
    <f:if condition="({block.type} == 'downloads')">
      <f:render section="blockDownload" arguments="{content: block}" />
    </f:if> 
    <f:if condition="({block.type} == 'note')">
      <f:render section="blockNote" arguments="{content: block}" />
    </f:if>
  </f:for>
</f:section>


<f:section name="blockDownload">
  <f:if condition="{content.downloads_records}">
    <v:render.template
      file="EXT:zab_site/ContentBlocks/ContentElements/downloads/templates/frontend.html"
      variables="{
        data: {
          uuid: 'downloads-{content.uid}',
          opt_type: 'grid',
          downloads_records: content.downloads_records,
          render: true
        }
      }"
      paths="{
        partialRootPaths: {
          100: 'EXT:zab_site/Resources/Private/Partials/'
        }
      }" />
  </f:if>
</f:section>


<f:section name="blockNote">
  <v:render.template
    file="EXT:zab_site/ContentBlocks/ContentElements/note/templates/frontend.html"
    variables="{
      data: {
        uuid: 'note-{content.uid}',
        opt_color: content.note_opt_color,
        opt_hide_icon: content.note_opt_hide_icon,
        title: content.note_title,
        info: content.note_info,
        text: content.note_text,
        render: true
      }
    }" />
</f:section>