<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>{{ title }}</title>
</head>
<body style="font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;">
<div style="width: 680px;"><a href="{{ store_url }}" title="{{ store_name }}"><img src="{{ logo }}" alt="{{ store_name }}" style="margin-bottom: 20px; border: none; max-width: 250px; display: block; margin: 20px auto;"/></a>
  <p style="margin-top: 0px; margin-bottom: 20px;">{{ text_received }}</p>
  {% if customer_id %}
  <p style="margin-top: 0px; margin-bottom: 20px;">{{ text_link }}</p>
  <p style="margin-top: 0px; margin-bottom: 20px;"><a href="{{ link }}">{{ link }}</a></p>
  {% endif %}
  {% if download %}
  <p style="margin-top: 0px; margin-bottom: 20px;">{{ text_download }}</p>
  <p style="margin-top: 0px; margin-bottom: 20px;"><a href="{{ download }}">{{ download }}</a></p>
  <{% endif %}
  <table style="border-collapse: collapse; width: 100%; border-top: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7; margin-bottom: 20px;">
    <thead>
      <tr>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;" colspan="2">{{ text_order_detail }}</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;"><b>{{ text_order_id }}</b> {{ order_id }}<br />
          <b>{{ text_date_added }}</b> {{ date_added }}<br />
          <b>{{ text_payment_method }}</b> {{ payment_method }}<br />
          {% if shipping_method %} <b>{{ text_shipping_method }}</b> {{ shipping_method }}
          {% endif %}</td>
        <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;"><b>{{ text_email }}</b> {{ email }}<br />
          <b>{{ text_telephone }}</b> {{ telephone }}<br />
          <b>{{ text_ip }}</b> {{ ip }}<br />
          <b>{{ text_order_status }}</b> {{ order_status }}<br /></td>
      </tr>
    </tbody>
  </table>
  {% if comment %}
  <table style="border-collapse: collapse; width: 100%; border-top: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7; margin-bottom: 20px;">
    <thead>
      <tr>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;">{{ text_instruction }}</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">{{ comment }}</td>
      </tr>
    </tbody>
  </table>
  {% endif %}
  <table style="border-collapse: collapse; width: 100%; border-top: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7; margin-bottom: 20px;">
    <thead>
      <tr>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;">{{ text_payment_address }}</td>
        {% if shipping_address %}
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;">{{ text_shipping_address }}</td>
        {% endif %} </tr>
    </thead>
    <tbody>
      <tr>
        <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">{{ payment_address }}</td>
        {% if shipping_address %}
        <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">{{ shipping_address }}</td>
        {% endif %} </tr>
    </tbody>
  </table>
  <table style="border-collapse: collapse; width: 100%; border-top: 1px solid #E7E7E7; border-left: 1px solid #E7E7E7; margin-bottom: 20px;">
    <thead>
      <tr>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;">&nbsp;</td>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222; width: 40%;">{{ text_product }}</td>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: left; padding: 15px 7px; color: #222222;">{{ text_model }}</td>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 15px 7px; color: #222222;">{{ text_quantity }}</td>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 15px 7px; color: #222222;">{{ text_price }}</td>
        <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; background-color: #EFEFEF; font-weight: bold; text-align: right; padding: 15px 7px; color: #222222;">{{ text_total }}</td>
      </tr>
    </thead>
    <tbody>
    
    {% for product in products %}
    <tr>
      <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">
		{% if product.image %}
			<div style="float: left; text-align: center; margin-right: 20px;">
				<a href="{{ product.href }}"><img src="{{ product.image }}" style="width:65px;"></a>
			</div>
        {% endif %}
      </td>
      <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px; width: 40%;"><a href="{{ product.href }}">{{ product.name }}</a>
        {% for option in product.option %}<br />
        &nbsp;<small> - {{ option.name }}: {{ option.value }}</small>{% endfor %}</td>
      <td style="font-size: 12px; border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">{{ product.model }}</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ product.quantity }}</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ product.price }}</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ product.total }}</td>
    </tr>
    {% endfor %}
    {% for voucher in vouchers %}
    <tr>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;">{{ voucher.description }}</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: left; padding: 7px;"></td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">1</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ voucher.amount }}</td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ voucher.amount }}</td>
    </tr>
    {% endfor %}
      </tbody>
    
    <tfoot>
    
    {% for total in totals %}
    <tr>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;" colspan="5"><b>{{ total.title }}:</b></td>
      <td style="font-size: 12px;	border-right: 1px solid #E7E7E7; border-bottom: 1px solid #E7E7E7; text-align: right; padding: 7px;">{{ total.value }}</td>
    </tr>
    {% endfor %}
      </tfoot>
    
  </table>
  <p style="margin-top: 20px; margin-bottom: 20px; text-align: center;">{{ text_footer }}</p>
	<div style="color: #757575; font-size: 12px; text-align: center; margin: 30px 0;">
		{% if oct_remarket_contact_address %}
		{{ oct_remarket_contact_address }}
		{% endif %}
		<div style="padding: 15px 0;">
		{% if oct_remarket_contact_telephone %}
			{% for phone in oct_remarket_contact_telephone %}
				<a style="font-size: 16px; line-height: 24px; font-weight: bold; color: #333333;" href="tel:{{ phone }}">{{ phone }}</a><br />
			{% endfor %}
		{% endif %}
		</div>
		{% if oct_remarket_contact_open %}
			{% for contact_open in oct_remarket_contact_open %}
				{{ contact_open }}
			{% endfor %}
		{% endif %}
		<div style="padding: 15px 0;">
		{% if oct_remarket_socials %}
			{% for social in oct_remarket_socials %}
				<a style="font-size: 18px; line-height: 27px; font-weight: bold; color: #000000;" href="{{ social.link }}">{{ social.title }}</a><br />
			{% endfor %}
		{% endif %}
		</div>
	</div>
</div>
</body>
</html>
