{{ template "header.html" . }}

<section class="bg-white py-8 antialiased md:py-16">
    <div class="mx-auto max-w-4xl">
      <div class="mt-6 sm:mt-8">
        <div class="relative overflow-x-auto border-b border-gray-200">
          <div class="m-4">
                <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>
          </div>

    <form action="/print" method="POST">
            {{ range .data.cartItems }}
            <div class="flex items-stretch border rounded m-4 p-2 sm:grid sm:grid-cols-8 gap-4">
              <input type="hidden" name="variant-id[]" value="{{ .ItemVariant.ID }}" required>
              <div class="col-span-1 hidden sm:block">
                <a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="flex items-center aspect-square h-full shrink-0">
                    <img class="h-full w-auto" src="/{{ .ShopItem.Image }}" alt="imac image" />
                </a>
              </div>
                <div class="flex flex-col col-span-7 justify-between p-4">
                    <div class="flex items-center mb-8">
                        <a href="/shopitems/{{ .ItemVariant.ShopItemID }}" class="hover:underline">{{ .ShopItem.Name }} - {{ .ItemVariant.Name }}</a>
                    </div>
                    <div class="flex space-x-2 mb-2">
                        {{ if .ShopItem.WasPrinted }}
                          <span class="inline-flex items-center rounded-md bg-green-50 px-2 py-1 text-xs font-medium text-green-700 ring-1 ring-green-600/20 ring-inset">Tested</span>
                        {{ else }}
                          <span class="inline-flex items-center rounded-md bg-red-50 px-2 py-1 text-xs font-medium text-red-700 ring-1 ring-red-600/10 ring-inset">Not Tested</span>
                        {{ end }}
                      <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">
                        {{ range $.data.paper }}
                        <option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
                        {{ end}}
                      </select>
                      <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">
                        <option selected value="0">CoverPage: None</option>
                        {{ range $.data.paper }}
                        <option value="{{ .ID }}">{{ .Brand }} - {{ .Name }}: {{ .Size }} {{ .Weight }}g/m2</option>
                        {{ end}}
                      </select>
                          <input type="number" name="variant-amount[]" value="{{ .Quantity }}" step="1" min="0" required class="text-right border rounded p-2 w-16">
                    </div>
                </div>
            </div>

            {{ end }}

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