  <div class="bg-white">
  <div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl">
  <h2 class="text-2xl font-bold tracking-tight text-gray-900">Available Zines</h2>

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  <div class="mt-6 grid grid-cols-1 gap-x-6 gap-y-10 md:grid-cols-2 xl:grid-cols-4">
  {{ range .data.shopItems }}

    <div class="myClass group relative">
            <a href="/shopitems/{{ .ID }}">
      <img loading="lazy" src="/{{ .Image }}" alt="Product Image" class="shadow-2xl aspect-4/5 mx-auto rounded bg-gray-200 object-cover group-hover:opacity-75 lg:aspect-auto lg:h-80">
            </a>
      <div class="mt-4 flex justify-between">
        <div>
          <h3 class="text-sm text-gray-700">
            <a href="/shopitems/{{ .ID }}">
              {{ .Name }}
            </a>
          </h3>
          <p class="mt-1 text-sm text-gray-500">{{ .Abstract }}</p>

          <p class="mt-1 text-sm text-gray-500">
            {{ range .Tags }}
            <a href="/tags/{{ .ID }}"><span class="bg-{{ .Color }}-100 text-{{ .Color }}-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded-sm ">{{ .Name }}</span></a>
            {{ end }}
          </p>
        </div>
        {{ if $.loggedIn }}
          <p class="text-sm font-medium text-gray-900">{{ .BasePrice }}€</p>
        {{ end }}
      </div>
    </div>

  {{ end }}

<script>
function myFunction() {
  // Declare variables
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById('myInput');
  filter = input.value.toUpperCase();
  //ul = document.getElementById("myUL");
  //li = ul.getElementsByTagName('li');
  li = document.getElementsByClassName("myClass");

  console.log(li)
  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[1];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}
</script>
    </div>
    </div>
    </div>
