{{ template "header.html" . }}

<section class="bg-white py-8 antialiased md:py-16">
  <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
    <div class="mx-auto max-w-3xl">
      <h2 class="text-xl font-semibold text-gray-900 sm:text-2xl">Order summary</h2>
        <dd class="mt-1 text-base font-normal text-gray-500 ">
          Thanks for your order! As soon as your payment arrived we will print your Order.
        </dd>

      <div class="mt-6 space-y-4 border-b border-t border-gray-200 py-8 sm:mt-8">
        <h4 class="text-lg font-semibold text-gray-900 ">Order status: {{ .data.order.Status }}</h4>
        <dl>
          <dd class="mt-1 text-base font-normal text-gray-500 ">
          Order Code: {{ .data.order.Token }}
          </dd>
        </dl>
      </div>

      <div class="mt-6 space-y-4 border-b border-t border-gray-200 py-8 sm:mt-8">
        <h4 class="text-lg font-semibold text-gray-900 ">Payment information</h4>

        <dl>
          <dd class="mt-1 text-base font-normal text-gray-500 ">
          Either you transfer money to our bank account, or you come by and pay in cash.<br><br>
          
          Miteinander Dresden e.V.*<br>
          IBAN: DE66500310001076201001<br>
          BIC: TRODDEF1 (Triodos Bank)<br>
          Subject: {{ .data.order.Token }}<br>
          Amount: {{ .data.priceTotal }}€
          </dd>
        </dl>
      </div>

      <div class="mt-6 space-y-4 border-b border-t border-gray-200 py-8 sm:mt-8">
        <h4 class="text-lg font-semibold text-gray-900 ">Delivery information</h4>

        <dl>
          <dd class="mt-1 text-base font-normal text-gray-500 ">
            <p><b>Shipping:</b> {{ .data.shipping.Name }}</p>
            {{ if .data.askAddress }}
            <p><b>First Name:</b> {{ .data.order.FirstName }}</p>
            <p><b>Last Name:</b> {{ .data.order.LastName }}</p>
            <p><b>Address:</b> {{ .data.order.Address }}</p>
            <p><b>Postal Code:</b> {{ .data.order.PostalCode }}</p>
            <p><b>City:</b> {{ .data.order.City }}</p>
            <p><b>Country:</b> {{ .data.order.Country }}</p>
            {{ end }}
            <p><b>Email:</b> {{ .data.order.Email }}</p>
            <p><b>Comment:</b> {{ .data.order.Comment }}</p>
          </dd>
        </dl>
      </div>

      <div class="mt-6 sm:mt-8">
        <div class="relative overflow-x-auto border-b border-gray-200 ">
          <table class="w-full text-left font-medium text-gray-900 ">
            <tbody class="divide-y divide-gray-200 ">
                {{ range .data.order.CartItems }}
              <tr>
                <td class="whitespace-nowrap py-4">
                  <div class="flex items-center gap-4">
                    <a href="#" 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>
                    <a href="/shopitems/{{ .ShopItem.ID }}" class="hover:underline">{{ .ShopItem.Name }} - {{ .ItemVariant.Name }}</a>
                  </div>
                </td>
                <td class="p-4 text-base font-normal text-gray-900 ">x{{ .Quantity }}</td>
                <td class="p-4 text-right text-base font-bold text-gray-900 ">{{ .ItemVariant.Price }}€</td>
              </tr>
                {{ end }}

            </tbody>
          </table>
        </div>

        <div class="mt-4 space-y-6">

          <div class="space-y-4">
            <div class="space-y-2">
              <dl class="flex items-center justify-between gap-4">
                <dt class="text-gray-500 ">Original price</dt>
                <dd class="text-base font-medium text-gray-900 ">{{ .data.priceProducts }}€</dd>
              </dl>

              <dl class="flex items-center justify-between gap-4">
                <dt class="text-gray-500 ">Shipping</dt>
                <dd class="text-base font-medium text-gray-900 ">{{ .data.shipping.Price }}€</dd>
              </dl>

            </div>

            <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 ">
              <dt class="text-lg font-bold text-gray-900 ">Total</dt>
              <dd class="text-lg font-bold text-gray-900 ">{{ .data.priceTotal }}€</dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

{{ template "footer.html" . }}