{{ 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">
                <h2 class="title font-manrope font-bold text-4xl leading-10 mb-8 text-center text-black">Zineshop Print
                  Service
                </h2>
    <p class="font-normal text-base leading-7 text-gray-900 text-left mb-5 mt-6">
      Pressing Print will automatically print the given Zines for you.<br>
      Add Zines for printing simply by adding them to the Cart
    </p>

    <p class="font-normal text-base leading-7 text-gray-500 text-left mb-5 mt-6">
      <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.
      Make 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="/print" 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.cartItems }}
            <tr>
                <input type="hidden" name="variant-id[]" value="{{ .ItemVariant.ID }}" required>
                <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">
                      <select name="variant-papertype[]" 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">
                        {{ range $.data.paper }}
                        <option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
                        {{ end}}
                      </select>
                </td>

                <td class="whitespace-nowrap py-4">
                      <select name="variant-coverpage[]" 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="0">None</option>
                        {{ range $.data.paper }}
                        <option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
                        {{ end}}
                      </select>
                </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>
                        <div class="mt-2">
                          <input type="number" name="variant-amount[]" value="{{ .Quantity }}" step="1" min="0" 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" . }}