{{ template "header.html" . }}

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
  <div class="bg-gray-200 rounded m-4 p-4">
     <div class="relative w-full md:w-48 mb-4 flex rounded-lg justify-center items-center">
       <img src="/{{ .data.shopItem.Image }}" alt="shopping image"
                class="object-cover w-full h-48 md:h-full rounded">
     </div>
    <h3 class="text-lg">{{ .data.shopItem.Name }}</h3>
    <i class="text-xs">{{ .data.shopItem.Abstract }}</i>
    <p class="text-xs">{{ .data.shopItem.Description }}</p>
    <p class="">Price: {{ .data.shopItem.Price }}</p>
    {{ if .loggedIn }}
    <div class="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0 px-4 sm:px-8">
      <a href="{{ .data.shopItem.ID }}/edit" class="rounded-md bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-gray-300 hover:bg-gray-700 hover:text-white">Edit</a>
      <a href="{{ .data.shopItem.ID }}/delete" class="rounded-md  bg-gray-900 m-2 px-3 py-2 text-sm font-medium text-red-300 hover:bg-gray-700 hover:text-white">Delete</a>
    </div>
    {{ end }}
  </div>

</div>

{{ template "footer.html" . }}