{{ 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">
    <h3 class="text-lg">{{ .data.shopItem.Name }}</h3>
    <i class="text-xs">{{ .data.shopItem.Description }}</i>
    <p class="">Price: {{ .data.shopItem.Price }}</p>
    {{ if .loggedIn }}

    <p class="mt-10 text-center text-sm/6 text-red-500">
      Do you really want to delete this item??
    </p>

    <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">

      <div>


      <p class="mt-10 text-center text-sm/6 text-red-500">
      {{ .data.error }}
      </p>
      <p class="mt-10 text-center text-sm/6 text-green-500">
      {{ .data.success }}
      </p>

    <form class="space-y-6" action="#" method="POST">
    <button type="submit" class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Delete</button>
      </div>

    </form>
      <a href="/shopitems/{{ .data.shopItem.ID }}" 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">Cancel</a>
    </div>
    {{ end }}
  </div>

</div>

{{ template "footer.html" . }}