  <div class="-m-1.5 overflow-x-auto">
    <div class="p-1.5 min-w-full inline-block align-middle">
      <div class="overflow-hidden">
        <table class="min-w-full divide-y divide-gray-200 ">
          <thead>
            <tr>
              <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase "></th>
              <th scope="col" class="px-6 py-3 text-start text-xs font-medium text-gray-500 uppercase ">Name</th>
              <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase ">Paper</th>
              <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase ">Amount</th>
              <th scope="col" class="px-6 py-3 text-end text-xs font-medium text-gray-500 uppercase ">Price</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-gray-200 ">
        {{ range .PrintJobs }}
            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                        <a href="/shopitems/{{ .Variant.ShopItemID }}" class="flex items-center aspect-square w-8 h-10 shrink-0">
                            <img class="h-auto w-full max-h-full " src="/{{ .ShopItem.Image }}" alt="imac image" />
                        </a>
              </td>
              <td class="px-6 py-4 text-sm text-gray-800 ">
                <div class="text-sm break-normal">
                  <p>{{ .ShopItem.Name }}</p>
                  <p>{{ .Variant.Name }}</p>
                </div>
              </td>
              <td class="px-6 py-4 text-sm text-gray-800 ">
                <div class="text-xs">
                  <p>{{ .PaperType.Brand }} - {{.PaperType.Name }}: {{ .PaperType.Size }} {{ .PaperType.Weight }}g</p>
                  {{ if .CoverPaperType }}
                    <p class="text-red-700">{{ .CoverPaperType.Brand }} - {{.CoverPaperType.Name }}: {{ .CoverPaperType.Size }} {{ .CoverPaperType.Weight }}g</p>
                  {{ end }}
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 ">{{ .Amount }}</td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 ">{{ .PriceTotal }}</td>
            </tr>

      {{ end }}

            <tr>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-800 ">
                <b>TOTAL</b>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 "></td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 "></td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 "></td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-800 "><b>{{ .PriceTotal }}</b></td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
