<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>{{ title }}</title>
  </head>
  <body style="font-family: Arial, sans-serif; color: black;">
    <table width="100%" border="0" align="center" cellpadding="30" cellspacing="0">
      <tr>
        <td>
          <table width="600" border="0" align="center" cellpadding="0" cellspacing="0">
            <tr>
              <td width="600" align="center" bgcolor="{{ header_background_color }}">
                <a href="{{ store_url }}" target="_blank" style="display:block;">
                  <img src="{{ logo }}" alt="{{ store_name }}" border="0" style="display:block; margin:20px; padding:0;">
                </a>
              </td>
            </tr>
            <tr><td width="600" height="30"></td></tr>
            <tr>
              <td width="600">
                <p style="font-size:30px; margin:0; padding:0;"><b>{{ customer_name }} comprou um presente para você em sua lista de presente!</b></p>
              </td>
            </tr>
            <tr><td width="600" height="30"></td></tr>
            <tr>
              <td width="600">
                <table width="600" border="0" cellpadding="0" cellspacing="0" style="border:1px solid #dddddd; border-collapse:collapse;">
                  <tr><td width="600" height="40" colspan="3"></td></tr>
                  <tr>
                    <td width="50"></td>
                    <td width="500">
                      <p style="font-size:12px; margin:0; padding:0;"><b>Informações sobre sua lista</b></p>
                      <p style="font-size:16px; margin:0; padding:0;">
                        Nome: {{ lista.cliente }}<br>
                        Lista: {{ lista.nome }}<br>
                        Data do evento: {{ lista.data }}<br>
                        Agradecimentos: {{ lista.frase }}
                      </p>
                    </td>
                    <td width="50"></td>
                  </tr>
                  <tr><td width="600" height="20" colspan="3"></td></tr>
                  <tr>
                    <td width="50"></td>
                    <td width="500">
                      <p style="font-size:12px; margin:0; padding:0;"><b>Quem comprou</b></p>
                      <p style="font-size:16px; margin:0; padding:0;">
                        Nome: {{ customer_name }}<br>
                        E-mail: {{ customer_email }}<br>
                        Telefone: {{ customer_fone }}
                      </p>
                    </td>
                    <td width="50"></td>
                  </tr>
                  {% if comment %}
                    <tr><td width="600" height="20" colspan="3"></td></tr>
                    <tr>
                      <td width="50"></td>
                      <td width="500">
                        <p style="font-size:12px; margin:0; padding:0;"><b>{{ text_instruction }}</b></p>
                        <p style="font-size:16px; margin:0; padding:0;">{{ comment }}</p>
                      </td>
                      <td width="50"></td>
                    </tr>
                  {% endif %}
                  <tr><td width="600" height="40" colspan="3"></td></tr>
                </table>
              </td>
            </tr>
            <tr><td width="600" height="30"></td></tr>
            <tr>
              <td>
                <table width="600" border="0" cellpadding="0" cellspacing="0" style="border-collapse:collapse;">
                  <tr>
                    <td width="50"></td>
                    <td width="350">
                      <p style="font-size:12px; margin:0; padding:0;"><b>{{ text_product }}</b></p>
                    </td>
                    <td width="100">
                      <p style="font-size:12px; margin:0; padding:0;"><b>{{ text_price }}</b></p>
                    </td>
                    <td width="100">
                      <p style="font-size:12px; margin:0; padding:0;"><b>{{ text_total }}</b></p>
                    </td>
                  </tr>
                  <tr>
                    <td width="600" height="10" colspan="4" style="border-bottom: 1px solid #dddddd;"></td>
                  </tr>
                  {% for product in products %}
                    <tr>
                      <td width="600" height="20" colspan="4"></td>
                    </tr>
                    <tr>
                      <td width="50">
                        <p style="font-size:16px; margin:0; padding:0;">{{ product.quantity }}x</p>
                      </td>
                      <td width="350">
                        <p style="font-size:12px; color:#666666; margin:0; padding:0;">{{ text_model }} {{ product.model }}</p>
                        <p style="font-size:16px; margin:0; padding:0;">{{ product.name }}</p>

                        {% if product.itens_kit %}
                          {% for itemKitKey, itemKit in product.itens_kit %}
                            <p style="font-size:12px; color:#666666; margin:0; padding:0;">{{ itemKit.quantidade }} - {{ itemKit.descricao }}</p>
                          {% endfor %}
                        {% endif %}

                        {% if product.grades[0] is defined and product.grades[0] %}
                    			{% for key, grade in product.grades[0] %}
                    				{% if grade != '' %}
                      		  	<p style="font-size:12px; color:#666666; margin:0; padding:0;">{{ grade }}</p>
                  		      {% endif %}
                  			  {% endfor %}
                  		  {% endif %}
                      </td>
                      <td width="100">
                        <p style="font-size:16px; margin:0; padding:0;">{{ product.price }}</p>
                      </td>
                      <td width="100">
                        <p style="font-size:16px; margin:0; padding:0;">{{ product.total }}</p>
                      </td>
                    </tr>
                    <tr>
                      <td width="600" height="20" colspan="4" style="border-bottom: 1px solid #dddddd;"></td>
                    </tr>
                  {% endfor %}
                  <tr><td width="600" height="30" colspan="4"></td></tr>
                  {% for total in totals %}
                    <tr>
                      <td width="50"></td>
                      <td width="350">
                        <p style="font-size:16px; line-height:28px; margin:0; padding:0;">{{ total.title }}</p>
                      </td>
                      <td width="200" colspan="2">
                        <p style="font-size:16px; line-height:28px; margin:0; padding:0;">{{ total.text }}</p>
                      </td>
                    </tr>
                  {% endfor %}
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </body>
</html>
