{{ template "header.html" . }}

<section class="bg-white py-8 antialiased dark:bg-gray-900 md:py-16">
    <div class="mx-auto max-w-3xl">
      <div class="mt-6 sm:mt-8">
        <div class="relative overflow-x-auto border-b border-gray-200 dark:border-gray-800">
    <p class="font-normal text-base leading-7 text-gray-500 text-left mb-5 mt-6">
      Welcome to the Zineshop Printservice.<br>
      Pressing Print will automatically print the given Zines for you.
      All you have to do is set an Amount for each Zine you want to print.<br><br>
      <bold>CoverPage</bold>: If selected, the Printer will take Paper from the BypassTray for the first page. For
      example you can put colored paper there to have a nice looking front page, and the rest will be normal paper.
      Makue sure you put paper in that tray when selecting this option.<br><br>

      Print Order: The Zines will be printed from top to bottom as seen in this list.


    </p>

                          <form action="#" method="POST">
          <table class="w-full text-left font-medium text-gray-900 dark:text-white ">
            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                {{ range .data.itemVariants }}
              <tr>
                <td class="whitespace-nowrap py-4">
                  <div class="flex items-center gap-4">
                    <a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="flex items-center aspect-square w-8 h-10 shrink-0">
                      <img class="h-auto w-full max-h-full dark:hidden" src="/{{ .ShopItem.Image }}" alt="imac image" />
                    </a>
                    <a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="hover:underline">{{ .ShopItem.Name }} - {{ .ItemVariant.Name }}</a>
                  </div>
                </td>
                <td class="whitespace-nowrap py-4">
                  <label class="flex text-sm/6 items-center">
                    <input type="checkbox" class="form-checkbox h-4 w-4 text-gray-900" value="CoverPage" name="CoverPage">
                      <span class="ml-2 text-sm/6 text-gray-900">CoverPage</span>
                  </label>
                </td>
                <td class="whitespace-nowrap py-4">
                  Amount:
                </td>
                <td class="p-4 text-right text-base font-bold text-gray-900 dark:text-white">
                  <div>
                    <input type="hidden" id="variant-name1" name="variant-name[]" value="B/W" required>
                    <div class="mt-2">
                      <input type="number" name="variant-value[]" id="variant-value1" step="1" min="1" required class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
                    </div>
                  </div>
                </td>

              </tr>
                {{ end }}

            </tbody>
          </table>

                <div class="max-lg:max-w-lg max-lg:mx-auto">
                    <p class="font-normal text-base leading-7 text-gray-500 text-center mb-5 mt-6">If CoverPage
                    selected, make sure you put paper in the BypassTray</p>
                    <button type="submit"
                        class="rounded-full py-4 px-6 bg-indigo-600 text-white font-semibold text-lg w-full text-center
                        transition-all duration-500 hover:bg-indigo-700 ">Print</button>
    
                </div>
                </form>
        </div>
      </div>
    </div>
  </div>
</section>

{{ template "footer.html" . }}