  <turbo-stream action="update" target="shop">
    <template>
      <table data-controller="filters">
  <thead>
    <tr class="bg-pink-200 border-b-2 border-pink-500">
      <th class="p-3">
        <div class="flex place-items-center">
          <div class="mr-2">
            Brand
          </div>


          <img class="sort" data-action="click-&gt;filters#brandAsc" style="max-width: 20px;" src="/assets/icons/chevron-up-round-square-d4707efc0d5b90e5c3a23fe862dbf47fd9f80c24.svg" />


          <img class="sort" data-action="click-&gt;filters#brandDesc" style="max-width: 20px;" src="/assets/icons/chevron-down-round-square-a0b2f94c5ae22c812f225b6b3ffaa4750b1279a1.svg" />
        </div>
      </th>

      <th class="p-3">
        <div class="flex place-items-center">
          <div class="mr-2">
            Product
          </div>


          <img class="sort" data-action="click-&gt;filters#productAsc" style="max-width: 20px;" src="/assets/icons/chevron-up-round-square-d4707efc0d5b90e5c3a23fe862dbf47fd9f80c24.svg" />


          <img class="sort" data-action="click-&gt;filters#productDesc" style="max-width: 20px;" src="/assets/icons/chevron-down-round-square-a0b2f94c5ae22c812f225b6b3ffaa4750b1279a1.svg" />
        </div>
      </th>

      <th class="p-3">
        <div class="flex place-items-center">
          <div class="mr-2">
            Nominal width
          </div>


          <img class="sort" data-action="click-&gt;filters#nominalWidthAsc" style="max-width: 20px; filter: brightness(1.6);" src="/assets/icons/chevron-up-round-square-d4707efc0d5b90e5c3a23fe862dbf47fd9f80c24.svg" />


          <img class="sort" data-action="click-&gt;filters#nominalWidthDesc" style="max-width: 20px;" src="/assets/icons/chevron-down-round-square-a0b2f94c5ae22c812f225b6b3ffaa4750b1279a1.svg" />
        </div>
      </th>

      <th class="p-3">
        <div class="flex place-items-center">
          <div class="mr-2">
            Quantity
          </div>


          <img class="sort" data-action="click-&gt;filters#quantityAsc" style="max-width: 20px;" src="/assets/icons/chevron-up-round-square-d4707efc0d5b90e5c3a23fe862dbf47fd9f80c24.svg" />


          <img class="sort" data-action="click-&gt;filters#quantityDesc" style="max-width: 20px;" src="/assets/icons/chevron-down-round-square-a0b2f94c5ae22c812f225b6b3ffaa4750b1279a1.svg" />
        </div>
      </th>

      <th class="p-3"></th>
    </tr>

    <tr>
      <td class="align-top">
        <div>
          <select name="brand" id="brand-filter" class="m-1" data-filters-target="brand" data-action="change-&gt;filters#brand"><option value="Filter by brand">Filter by brand</option>
<option value="EXS Condoms">EXS Condoms</option>
<option value="Skins Condoms">Skins Condoms</option>
<option value="Pasante">Pasante</option>
<option value="Mates">Mates</option>
<option value="Durex">Durex</option></select>
        </div>

      </td>

      <td class="align-top px-1">
        <input type="search" name="product" id="product" class="mt-1 w-full" data-filters-target="product" data-action="input-&gt;filters#product" />
      </td>

      <td class="align-top">
        <div>
          <select name="nominal_widths" id="nominal-width-filter" class="m-1" data-filters-target="nominalWidth" data-action="change-&gt;filters#addNominalWidth"><option value="Filter by nominal width">Filter by nominal width</option>
<option value="52">52</option>
<option value="52.5">52.5</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="56">56</option>
<option value="60">60</option></select>
        </div>

      </td>

      <td class="align-top">
        <div>
          <select name="quantities" id="quantity-filter" class="m-1" data-filters-target="quantity" data-action="change-&gt;filters#addQuantity"><option value="Filter by quantity">Filter by quantity</option>
<option value="3">3</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="16">16</option>
<option value="36">36</option>
<option value="72">72</option>
<option value="100">100</option></select>
        </div>

      </td>

      <td class="align-top">
        <button type="button" class="m-1 text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" data-action="click->filters#clear">
          Clear filters
        </button>
      </td>
    </tr>
  </thead>

  <tbody id="tbody">
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Skins Condoms</td>
      <td class="p-3">Skins Ultra Thin Latex Condoms</td>
      <td class="p-3">52mm</td>
      <td class="p-3">16</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/9">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Skins Condoms</td>
      <td class="p-3">Skins Ultra Thin Latex Condoms</td>
      <td class="p-3">52mm</td>
      <td class="p-3">100</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/6">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Invisible Extra Sensitive Latex Condoms</td>
      <td class="p-3">52mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/21">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Thin Feel Close Fit Latex Condoms</td>
      <td class="p-3">52.5mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/19">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Pasante</td>
      <td class="p-3">Pasante Delay Latex Condoms</td>
      <td class="p-3">53mm</td>
      <td class="p-3">72</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/7">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Mates</td>
      <td class="p-3">Mates SKYN Non Latex Condoms</td>
      <td class="p-3">53mm</td>
      <td class="p-3">3</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/15">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Mates</td>
      <td class="p-3">Mates SKYN Non Latex Condoms</td>
      <td class="p-3">53mm</td>
      <td class="p-3">10</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/18">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Mates</td>
      <td class="p-3">Mates SKYN Intense Feel Non Latex Condoms</td>
      <td class="p-3">53mm</td>
      <td class="p-3">10</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/8">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Mates</td>
      <td class="p-3">Mates SKYN Elite Non Latex Condoms</td>
      <td class="p-3">53mm</td>
      <td class="p-3">10</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/4">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Pasante</td>
      <td class="p-3">Pasante Regular Latex Condoms</td>
      <td class="p-3">54mm</td>
      <td class="p-3">72</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/13">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Skins Condoms</td>
      <td class="p-3">Skins Assorted Flavoured Latex Condoms</td>
      <td class="p-3">54mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/16">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Intimate Feel Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/12">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Mutual Climax Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/14">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Thin Feel Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/1">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Multibuy Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">3 x 12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/11">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Extra Safe Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/10">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Extended Pleasure Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/5">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Intense Ribbed and Dotted Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/17">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Durex</td>
      <td class="p-3">Durex Pleasure Me Latex Condoms</td>
      <td class="p-3">56mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/3">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">EXS Condoms</td>
      <td class="p-3">EXS Magnum Extra Large Latex Condoms</td>
      <td class="p-3">60mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/20">View</a></td>
    </tr>
    <tr class="even:bg-pink-200 odd:bg-gray-50">
      <td class="p-3">Pasante</td>
      <td class="p-3">Pasante King Size Latex Condoms</td>
      <td class="p-3">60mm</td>
      <td class="p-3">12</td>
      <td class="p-3"><a rel="nofollow" class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-200 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2" href="/products/2">View</a></td>
    </tr>
</tbody>

</table>

    </template>
  </turbo-stream>
