{{ template "header.html" . }}

<div class="bg-gray-100 dark:bg-gray-800 py-8">
                  <form action="/cart" method="POST">
    <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex flex-col md:flex-row -mx-4">
            <div class="md:flex-1 px-4">
                <div class="h-[460px] rounded-lg bg-gray-300 dark:bg-gray-700 mb-4">
                  <img class="w-full h-full object-cover" src="/{{ .data.shopItem.Image}}" alt="Product Image">
                </div>
                <div class="flex -mx-2 mb-4">

                  <input type="hidden" id="{{ .data.shopItem.ID}}" name="ShopItemId" value="{{ .data.shopItem.ID }}">
                    <div class="w-1/3 px-2">
                        <button type="submit" class="w-full bg-gray-900 dark:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Add to Cart</button>
                    </div>

                    <div class="w-1/3 px-2">
                      <a href="/{{ .data.shopItem.Pdf }}"><button type="button" class="w-full bg-blue-900 dark:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">View</button></a>
                    </div>

    {{ if .loggedIn }}
                    <div class="w-1/3 px-2">
                      <a href="{{ .data.shopItem.ID }}/edit"><button type="button" class="w-full bg-blue-900 dark:bg-gray-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Edit</button></a>
                    </div>

                    <div class="w-1/3 px-2">
                      <a href="{{ .data.shopItem.ID }}/delete"><button type="button" class="w-full bg-red-900 dark:bg-red-600 text-white py-2 px-4 rounded-full font-bold hover:bg-gray-800 dark:hover:bg-gray-700">Delete</button></a>
                    </div>
    {{ end }}
                </div>
            </div>
            <div class="md:flex-1 px-4">
              <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-2">{{ .data.shopItem.Name }}</h2>
                <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">
                  {{ .data.shopItem.Abstract }}
                </p>

                <div class="flex mb-4">
                    <label for="ItemVariantId" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"></label>
                      <select name="ItemVariantId" id="ItemVariantId" required class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
                        <option selected value="">Choose a variant</option>
                  {{ range .data.shopItem.Variants }}
                    <option value="{{ .ID }}">{{ .Name }} - {{ .Price }}€</option>
                  {{ end }}
                      </select>
                </div>

                <div class="flex mb-4">
                    <div class="mr-4">
                        <span class="font-bold text-gray-700 dark:text-gray-300">Tags:</span>
                          <span class="text-gray-600 dark:text-gray-300">
                            {{ range .data.shopItem.Tags }}
                              {{ .Name }}
                            {{ end }}
                          </span>
                    </div>
                </div>
                <!--
                <div class="mb-4">
                    <span class="font-bold text-gray-700 dark:text-gray-300">Select Size:</span>
                    <div class="flex items-center mt-2">
                        <button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Black/White</button>
                        <button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Colored</button>
                        <button class="bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white py-2 px-4 rounded-full font-bold mr-2 hover:bg-gray-400 dark:hover:bg-gray-600">Colored Covering Page</button>
                    </div>
                </div>
                -->
                <div>
                    <span class="font-bold text-gray-700 dark:text-gray-300">Product Description:</span>
                    <p class="text-gray-600 dark:text-gray-300 text-sm mt-2">
                      {{ .data.shopItem.Description }}
                    </p>
                </div>
            </div>
        </div>
    </div>
                  </form>
</div>


<!--
<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 flex rounded-lg justify-center items-center">
       <img src="/{{ .data.shopItem.Image }}" alt="shopping image"
                class="object-cover items-center justify-center 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" . }}