
<turbo-stream action="update" target="drawer"><template>
  <drawer data-controller="drawer" class="fixed inset-0 z-50 flex justify-end bg-black/40">
    <div class="absolute inset-0" data-action="click->drawer#close"></div>
    <div class="relative w-full lg:max-w-lg bg-gray-50 border-l border-gray-500 flex flex-col shadow-xl h-full">
      <div class="flex justify-between items-center p-8">
        <h2 class="text-lg font-bold">Filter</h2>
          <button name="button" type="button" class="h-10 w-10 inline-flex items-center justify-center border border-brand-darkgray rounded-full text-xs text-brand-darkgray no-underline whitespace-nowrap bg-transparent hover:bg-brand-darkgray hover:text-[var(--bg)] transition-[background-color,color] duration-200 ease-in-out cursor-pointer" data-action="drawer#close"><i class="fa-solid fa-x"></i></button>

      </div>
      <div class="overflow-y-auto flex-1 px-8">
        
  <form data-controller="filter-count" data-filter-count-count-url-value="/search/visits/count" data-turbo-stream="true" action="/search/visits" accept-charset="UTF-8" method="get">
    <input autocomplete="off" type="hidden" name="query" id="query" />

    <div class="sticky top-0 bg-gray-50 z-10 pb-3 mb-4 -mx-4 px-4">
      <div class="flex gap-2">
        <button type="button"
                class="border border-brand-darkgray px-4 py-1 text-sm transition-[background-color,color] duration-200 cursor-pointer bg-brand-darkgray text-[var(--bg)]"
                data-filter-count-target="allButton"
                data-action="click->filter-count#showAll">Alles</button>
        <button type="button"
                class="border border-brand-darkgray px-4 py-1 text-sm transition-[background-color,color] duration-200 cursor-pointer "
                
                data-filter-count-target="yearsButton"
                data-action="click->filter-count#showYears">Jahr</button>
        <button type="button"
                class="border border-brand-darkgray px-4 py-1 text-sm transition-[background-color,color] duration-200 cursor-pointer "
                
                data-filter-count-target="categoriesButton"
                data-action="click->filter-count#showCategories">Kategorie</button>
      </div>
    </div>

    
<div class="mb-2 border-b">
  <button type="button"
          class="flex justify-between items-center w-full py-2 font-semibold cursor-pointer"
          data-action="click-&gt;filter-count#toggleYears"
          data-filter-count-target="yearsList"
          >
    <span>Jahr</span>
    <i class="fa-solid fa-chevron-right transition-transform duration-200 " data-chevron></i>
  </button>
  <div class="hidden">
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2026"
               
               data-action="change->filter-count#updateCount">
        2026
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2025"
               
               data-action="change->filter-count#updateCount">
        2025
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2024"
               
               data-action="change->filter-count#updateCount">
        2024
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2023"
               
               data-action="change->filter-count#updateCount">
        2023
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2022"
               
               data-action="change->filter-count#updateCount">
        2022
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2021"
               
               data-action="change->filter-count#updateCount">
        2021
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2020"
               
               data-action="change->filter-count#updateCount">
        2020
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2019"
               
               data-action="change->filter-count#updateCount">
        2019
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2018"
               
               data-action="change->filter-count#updateCount">
        2018
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2017"
               
               data-action="change->filter-count#updateCount">
        2017
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2016"
               
               data-action="change->filter-count#updateCount">
        2016
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2015"
               
               data-action="change->filter-count#updateCount">
        2015
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2014"
               
               data-action="change->filter-count#updateCount">
        2014
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2013"
               
               data-action="change->filter-count#updateCount">
        2013
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2012"
               
               data-action="change->filter-count#updateCount">
        2012
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2011"
               
               data-action="change->filter-count#updateCount">
        2011
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2010"
               
               data-action="change->filter-count#updateCount">
        2010
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="years[]"
               value="2009"
               
               data-action="change->filter-count#updateCount">
        2009
      </label>
  </div>
</div>


    
<div class="mb-2 border-b">
  <button type="button"
          class="flex justify-between items-center w-full py-2 font-semibold cursor-pointer"
          data-action="click-&gt;filter-count#toggleCategories"
          data-filter-count-target="categoriesList"
          >
    <span>Kategorie</span>
    <i class="fa-solid fa-chevron-right transition-transform duration-200 " data-chevron></i>
  </button>
  <div class="hidden">
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="54"
               
               data-action="change->filter-count#updateCount">
        Aufarbeitung
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="47"
               
               data-action="change->filter-count#updateCount">
        Backen
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="45"
               
               data-action="change->filter-count#updateCount">
        Brotschneider
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="62"
               
               data-action="change->filter-count#updateCount">
        EDV
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="58"
               
               data-action="change->filter-count#updateCount">
        Gastro
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="48"
               
               data-action="change->filter-count#updateCount">
        Hygiene
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="30"
               
               data-action="change->filter-count#updateCount">
        Kaffee
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="56"
               
               data-action="change->filter-count#updateCount">
        Kälte
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="72"
               
               data-action="change->filter-count#updateCount">
        Kleingeräte
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="57"
               
               data-action="change->filter-count#updateCount">
        Kneten
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="60"
               
               data-action="change->filter-count#updateCount">
        Konditorei
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="59"
               
               data-action="change->filter-count#updateCount">
        Ladenbacken
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="55"
               
               data-action="change->filter-count#updateCount">
        Ladenbau
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="61"
               
               data-action="change->filter-count#updateCount">
        Logistik
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="53"
               
               data-action="change->filter-count#updateCount">
        Management
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="46"
               
               data-action="change->filter-count#updateCount">
        Rösterei
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="73"
               
               data-action="change->filter-count#updateCount">
        Spülmaschinen
      </label>
      <label class="flex items-center gap-3 py-1.5 cursor-pointer">
        <input type="checkbox" name="category_ids[]"
               value="51"
               
               data-action="change->filter-count#updateCount">
        Verkauf
      </label>
  </div>
</div>


    <div class="sticky bottom-0 bg-gray-50 pt-8 pb-2 -mx-4 px-4 flex justify-start items-center gap-4 mt-4">
      

  <a class="inline-flex items-center relative py-3 px-5 border border-brand-darkgray text-sm text-brand-darkgray no-underline whitespace-nowrap bg-transparent hover:bg-brand-darkgray hover:text-[var(--bg)] transition-[background-color,color] duration-200 ease-in-out cursor-pointer group   " data-turbo-stream="true" href="/search/visits">    Löschen
</a>



      

  

  <button name="button" type="submit" class="inline-flex items-center relative py-3 px-5 border border-brand-darkgray text-sm text-brand-darkgray no-underline whitespace-nowrap bg-transparent hover:bg-brand-darkgray hover:text-[var(--bg)] transition-[background-color,color] duration-200 ease-in-out cursor-pointer group   "> 
    
        <span id="filter-count">227</span>&nbsp;Anzeigen

</button>


    </div>
</form>
      </div>
    </div>
  </drawer>
</template></turbo-stream>