<html>
   <head>
      <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
      <style>body {
            background-color: #f6f6f6;
            font-family: Helvetica, Arial, sans-serif;
            margin: 20px
         }
         .main {
            background: #fff;
            border-radius: 3px;
            width: 100%
         }
         .container {
            margin: 0 auto !important;
            max-width: 600px;
            width: 100%
         }
         .wrapper {
            box-sizing: border-box
         }
         .gw-box {
            padding: 10px 40px
         }
         table {
            width: 100%
         }
      </style>
   </head>
   <body>
      <div class="container" style="background:#fafbfb;">
         <table border="0" cellpadding="0" cellspacing="0" class="main">
            <tr>
               <td class="wrapper">
                  <table border="0" cellpadding="0" cellspacing="0">
                     <tr>
                        <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="auto">
                           <div class="klaviyo-block klaviyo-image-block gw-box" style="text-align:center">
                                <a href="{{ event.shop_url }}" style="margin:0 auto; text-align:center">
                                    <img alt="Logo" src="https://static.socialshopwave.com/images/official/logo_with_transparent_bg.png" style="border:0; height:auto; line-height:100%; max-width:100%; outline:none; text-decoration:none; display:block; width:100%; background-color:transparent; margin:0 auto" width="auto"/>
                                </a>
                           </div>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
            <tr>
               <td class="wrapper">
                  <table border="0" cellpadding="0" cellspacing="0">
                     <tr>
                        <td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                           <div class="klaviyo-block klaviyo-text-block gw-box">
                              <div style="text-align:center; font-size:24px; font-weight:700; font-family:Helvetica, Arial, sans-serif; line-height:160%; color:#000000; margin: 30px 0 0">
                                 Share your thoughts on {{event.product_title}} from {{event.shop_name}} ⭐
                              </div>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                           <div class="klaviyo-block klaviyo-text-block gw-box">
                              <div align="start" style="margin:15px 0 10px 0; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 400;
                                 line-height: 160%; color: #000000; ">
                                 Hi {{ event.customer_name }},<br/><br/>Thank you for shopping with us. We hope your recent purchase of {{ event.product_title }} on order #{{ event.order_number }} has exceeded your expectations!
                                 <br/><br/> Could you take a moment to share your thoughts on your purchase? Your feedback is invaluable as we strive to enhance our products and services continually. We genuinely want to hear about your recent experience with us! ⭐
                              </div>
                           </div>
                        </td>
                     </tr>
                     <tr>
                        <td>
                           <table align="center" border="0" cellpadding="0" cellspacing="0" style="width: 100%; margin: 30px 0 0">
                              <tr style="text-align: center">
                                 {% for product in event.products %}
                                    <td style="display: inline-block; max-width: 161px; width: 100%; margin: 0 10px; border-radius: 12px;">
                                        <table style="width: 100%; margin: 0 0 20px 0;" align="center" border="0" cellpadding="0" cellspacing="0">
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <div style="height: 200px; width: 100%;">
                                                            <a href="{{ product.formActionUrl }}">
                                                                <div style="
                                                                        background-image: url({{ product.imageUrl }});
                                                                        background-color: #f5f5f5;
                                                                        max-width: 100%;
                                                                        width: 100%;
                                                                        border-radius: 6px 6px 0 0;
                                                                        border: none;
                                                                        background-size: cover;
                                                                        background-repeat: no-repeat;
                                                                        background-position: center center;
                                                                        height: 200px;
                                                                    "
                                                                >
                                                                    <img style="height: 0; width: 0;" src="{{ product.imageUrl }}"/>
                                                                </div>
                                                            </a>
                                                        </div>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <div style=" background:  #f5f5f5; padding: 8px; border-radius: 0 0 12px 12px;">
                                                            <a
                                                                href="{{ product.formActionUrl }}"
                                                                style="
                                                                    font-family: Helvetica, Arial, sans-serif;
                                                                    color: #072448;
                                                                    display: block;
                                                                    font-size: 14px;
                                                                    font-weight: 600;
                                                                    line-height: 20px;
                                                                    text-decoration: none;
                                                                    text-align: start;
                                                                    height: 40px;
                                                                    max-height: 40px;
                                                                    overflow: hidden;
                                                                    display: -webkit-box;
                                                                    -webkit-line-clamp: 2;
                                                                    line-clamp: 2;
                                                                    -webkit-box-orient: vertical;
                                                                "
                                                            >
                                                                {{ product.title }}
                                                            </a>
                                                            <div style="padding-top: 12px;">
                                                                <table style="width: 100%; border-spacing: 0;">
                                                                    <tbody>
                                                                        <tr>
                                                                            <td>
                                                                                <a href="{{ product.formActionUrl }}"
                                                                                    style="
                                                                                        font-family: Helvetica, Arial, sans-serif;
                                                                                        color: #072448;
                                                                                        background: #ffc100;
                                                                                        display: inline-block;
                                                                                        width: 100%;
                                                                                        height: 100%;
                                                                                        max-height: 40px;
                                                                                        border-radius: 2px;
                                                                                        font-size: 12px;
                                                                                        line-height: 1;
                                                                                        font-weight: 400;
                                                                                        cursor: pointer;
                                                                                        text-decoration: none;
                                                                                        text-align: center;
                                                                                        text-decoration: none;
                                                                                        box-sizing: border-box;
                                                                                        padding: 8px 0;
                                                                                    "
                                                                                >
                                                                                    Write a review
                                                                                </a>
                                                                            </td>
                                                                        </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </td>
                                {% endfor %}

                              </tr>
                           </table>
                        </td>
                     </tr>

                     <tr>
                        <td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                           <div class="klaviyo-block klaviyo-text-block gw-box">
                              <div style="text-align:start; font-size:16px; font-weight:400; font-family:Helvetica, Arial, sans-serif; line-height: 160%; color:#000000; padding: 12px 0 24px 0; margin: 10px 0 0">
                                 Your feedback will help us to continually improve our products and services.
                              </div>
                           </div>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
            <tr>
               <td class="wrapper">
                  <table border="0" cellpadding="0" cellspacing="0">
                     <tr>
                        <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600" style="background: #ebebeb">
                           <div class="klaviyo-block klaviyo-text-block gw-box">
                              <p class="center" style="text-align:center"> <span>Kind regards,</span><br/>
                                 <span>The {{ event.shop_name }} team</span>
                              </p>
                              <p class="center" style="text-align:center">
                                 No longer want to receive these emails? {% unsubscribe %}.<br/>
                                 {{ organization.name }} {{ organization.full_address }}.
                              </p>
                           </div>
                        </td>
                     </tr>
                  </table>
               </td>
            </tr>
         </table>
      </div>
   </body>
</html>
