{namespace core=TYPO3\CMS\Core\ViewHelpers}

<div id="filternav">
  <div class="filternav-trigger">
    <div class="trigger-icon">
      <i class="icon icon-collapse-left"></i>
    </div>
    <div class="trigger-label"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterToggler' /></div>
  </div>

  <div class="filternav-wrapper">

    <!-- Kopfbereich des Filters mit Produktdarstellung -->

    <div class="filter-head">
      <div class="filter-headline"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterHeadline' /></div>
    </div>


    <div class="filter-section filter-type">
      <div class="filter-title"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterNadeltyp' /></div>
      <div id="reset-type" class="filter-reset">
        <span class="icon-cancel"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterZuruecksetzen' /></span>
      </div>

      <div>
        <!-- Liste mit den Nadeltypen -->

        <ul class="nav nav-needles">
          <li><a href="#DS" data-original-title="3/8 kreisförmig, schneidender Nadelkörper" data-type="DS" class="needlesymbol"></a></li>

          <!-- Geht das Produktarray für EntryNadel durch und schnappt sich die Nadeltypen -->
          <f:variable name="nadeltyp" value="NULL" />

          <f:for as="produkt" each="{results}">
            <f:if condition="{nadeltyp} != {produkt.amnty1}"> <!-- Bedingung ($nadelTyp != $row["amnty1"]) -->
              <li data-nadeltyp="{produkt.amnty1}" class="nadelsymbol" data-original-title="{f:translate(key:'LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_nadForm_{produkt.nadform1}')}, {f:translate(key:'LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_nadArt_{produkt.nadart1}')}, {f:translate(key:'LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_nadMerk_{produkt.nadmerk1}')}"><span>{produkt.amnty1}</span></li>
            </f:if>
            <f:variable name="nadeltyp">{produkt.amnty1}</f:variable>
          </f:for>

          <!-- foreach mit Iterator über Produktarray für Entry (ohne Nadeln) resultsON -->
          <f:for as="produkt" each="{resultsON}" iteration="counter">
            <f:if condition="{counter.cycle} == 1">
              <li data-nadeltyp="NA" class="nadelsymbol" data-original-title="{f:translate(key:'LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_nadeltypTitleUnbenadelt')}"><span><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_nadeltypTextUnbenadelt' /></span></li>
            </f:if>
          </f:for>
        </ul>
      </div>
    </div>

    <div class="filter-section filter-length">
      <div class="filter-title"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterFadenlaenge' /></div>
      <div id="reset-length" class="filter-reset">
        <span class="icon-cancel"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterZuruecksetzen' /></span>
      </div>
      <div>
        <div class="filter-switch"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterFadenlaengeSlider' />
          <span id="lengthLower"></span> – <span id="lengthUpper"></span> cm
        </div>
        <div class="filter-selector">

          <!-- Slider für die Größenauswahl -->
          <!-- IF-Workaround wg. folgendem Bug (bestätigt in 10.4.15): https://stackoverflow.com/questions/54095558/typo3-use-fluid-variable-in-javascript -->
          <f:if condition="1">
            <script type="text/javascript">
              var filterLength = [{filterLang}]
            </script>
            <div id="sliderLength"></div>
          </f:if>
        </div>
      </div>
    </div>

    <div class="filter-section filter-diameter">
      <div class="filter-title"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterFadenstaerke' /></div>
      <div id="reset-diameter" class="filter-reset">
        <span class="icon-cancel"><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterZuruecksetzen' /></span>
      </div>
      <div>
        <div class="filter-selector">

          <!-- Liste der Fadenstärke in EP -->
          <span><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterFadenstaerkeEP' /></span>
          <ul class="diameters" id="filter-EP">
            <f:for as="filter" each="{filterSep}">
              <li class="diameter" data-unit="EP" data-diameter="{filter}">{filter}</li>
            </f:for>
          </ul>
          <f:if condition="1">
            <script type="text/javascript">
              var filterEP = [{filterSepS}]
            </script>
          </f:if>

          <!-- Liste der Fadenstärke in USP -->
          <span><f:translate key='LLL:EXT:amdsprodukte/Resources/Private/Language/locallang_db.xlf:tx_amdsProdukt_filterFadenstaerkeUSP' /></span>
          <ul class="diameters" id="filter-USP">
            <f:for as="filter" each="{filterUsp}">
              <li class="diameter" data-unit="USP" data-diameter="{filter}">{filter}</li>
            </f:for>
          </ul>
          <f:if condition="1">
            <script type="text/javascript">
              var filterUSP = [{filterUspS}]
            </script>
          </f:if>
        </div>
      </div>
    </div>
  </div>
</div>