<!DOCTYPE html>
<html>
  <head>
    <title>Your Order Confirmation</title>
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,500" rel="stylesheet">
  </head>
  <style>
    body{
      font-family: 'Roboto', sans-serif;
    }
  </style>
  <body>
    <h2>Your Order Confirmation</h2>
    <p>Thanks for shopping with us!<p>
    <h3>Order ID</h3>
    <p>#{{ order.order_id }}</p>
    <h3>Shipping</h3>
    <p>#{{ order.shipping_tracking_id }}</p>
    <p>{{ order.shipping_cost.units }}. {{ "%02d" | format(order.shipping_cost.nanos // 10000000) }} {{ order.shipping_cost.currency_code }}</p>
    <p>{{ order.shipping_address.street_address_1 }}, {{order.shipping_address.street_address_2}}, {{order.shipping_address.city}}, {{order.shipping_address.country}} {{order.shipping_address.zip_code}}</p>
    <h3>Items</h3>
    <table style="width:100%">
        <tr>
          <th>Item No.</th>
          <th>Quantity</th> 
          <th>Price</th>
        </tr>
        {% for item in order.items %}
        <tr>
          <td>#{{ item.item.product_id }}</td>
          <td>{{ item.item.quantity }}</td> 
          <td>{{ item.cost.units }}.{{ "%02d" | format(item.cost.nanos // 10000000) }} {{ item.cost.currency_code }}</td>
        </tr>
        {% endfor %}
    </table>
  </body>
</html>
