<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      @import
      url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
      body { margin: 0; border-radius: 10px; font-family: 'Poppins', sans-serif;
      color: #000; height: 100%; position: relative; font-size: 12px;
      line-height: 1.4; } .contents { margin: 13px 0 0 0; display: inline-block;
      width: 100%; height: 100%; } .logo img { max-width: 200px; max-height:
      200px; } .logo { font-size: 16px; font-weight: 400; } .text-section h4 {
      margin-bottom: 4px; font-weight: 600; } .address { margin: 0; width:
      200px; line-height: 1.4; font-weight: 300; text-transform: capitalize; }
      .phone { font-weight: 300; margin-top: 2px; } .phone span { font-weight:
      400; } hr { border: 0.5px solid rgba(131, 127, 127, 0.1); } .table-section
      table { border-collapse: separate; border-spacing: 0 3px; table-layout:
      fixed; width: 100%; } .table-section .title { font-weight: 500; }
      .table-section td.value { font-weight: 300; text-align: right; }
      .table-section td.value.price { font-weight: 400; padding: 1px 25px; }
      .price { text-transform: uppercase; } .table-section td { padding: 0 25px;
      } .table-section .footer { background-color: #137b85; color: #fff; width:
      fit-content; } .table-section.footer_table table { width: auto; border:
      1px solid rgba(0,0,0,0.1); padding: 14px; } .table-section .footer td {
      padding: 5px 25px !important; } .table-section thead { background-color:
      #137b85; color: #fff; } .text-section .notes { margin-top: 3px; max-width:
      400px; font-weight: 300; } .product-table table { border-collapse:
      separate; border-spacing: 0 3px; width: 100%; } .product-table td.value {
      text-align: left; border-bottom: 1px solid rgba(131, 127, 127, 0.1);
      padding-bottom: 6px; padding-top: 6px; } .product-table th { text-align:
      left; padding: 9px 25px; } .footer-contents { margin-top: 30px; }
      .signature { text-align: center; } .signature_logo { display: block;
      margin: 0 auto; } .signature_logo img { max-width: 150px; max-height:
      150px; } .capitalize { text-transform: capitalize !important; }
      .text_thank_you { background-color: #137b85; color: #fff; font-weight:
      300; font-size: 28px; padding: 30px 30px; border-top-right-radius: 10px;
      border-top-left-radius: 10px; } .order_text_message { padding: 0px 0 20px
      0; font-weight: 300; font-size: 16px; color: rgb(109, 109, 109); }
      .inner_section { padding: 25px; } .section { color: #000;
      background-color: #fff !important; border: 1px solid #137c8528; display:
      block; border-radius: 10px; } .body { padding: 20px; background-color:
      rgb(241, 238, 238); height: 100%; }
      .order_title{margin-bottom:8px;}.float-left { float: left; } .float-right
      { float: right; } .notes-section h4{margin-bottom: 0 !important;}
      .notes-section p{margin-top: 0 !important;} @media(max-width: 768px) {
      .item_style{width: 25%;}.table-section.footer_table table{width: 100%;}
      .contents { display: block; } .text_thank_you { font-size: 22px; }
      .order_text_message { font-size: 14px; } .float-left { float: none;
      display: block; margin: 0 auto; padding-bottom: 3px; } .float-right {
      float: none; display: block; margin: 0 auto; } } .content_section {
      padding-bottom: 10px; } .order_title{ font-size: 18px; color: #137b85; }
      .warning_text { text-align: center; color: rgb(133, 133, 133); font-size:
      14px; margin: 5px 0; margin-top: 10px } .text_thank_you span{
      text-transform: capitalize; }
    </style>
  </head>

  <body style="font-family: arial;">
    <div class="body">
      <div class="section">
        <div class="header">
          <div class="text_thank_you">
            Order
            <span>{{order_status}}</span>
          </div>
        </div>

        <div class="inner_section">
          <div class="order_title">
            Order (#{{order_id}})
          </div>
          <p style="margin: 0; margin-top: 10px;">Customer:
            {{customer_name}}</p>
          <p style="margin: 0; margin-top: 2px;">User ID: {{userid}}</p>
          <div class="contents">
            <div class="table-section product-table">
              <table>
                <thead>
                  <th class="title item_style">Item</th>
                  <th class="title">Qnty</th>
                  <th class="title">Price</th>
                </thead>
                {{#each products}}
                  <tr>
                    <td class="value">{{this.name}}</td>
                    <td
                      class="value"
                      style="text-align: centre;"
                    >{{this.quantity}}</td>
                    <td
                      class="value price"
                      style="text-align: centre;"
                    >{{this.price}} {{this.currency_type}}</td>
                  </tr>{{/each}}
              </table>
            </div>
          </div>

        </div>
      </div>
      <p class="warning_text">{{warningText}}</p>
    </div>

  </body>

</html>