<!doctype html>
                <html>
                  <head>
                    <meta charset="UTF-8" />
                    <title>New Purchase Notification</title>
                  </head>
                  <body
                    style="
                      font-family: Arial, sans-serif;
                      line-height: 1.6;
                      color: #333;
                      max-width: 600px;
                      margin: 0 auto;
                      padding: 20px;
                    "
                  >
                    <div style="text-align: left; margin-bottom: 20px">
                      <img
                        src="{{EMAIL_LOGO}}"
                        alt="{{IMAGE_ALT}}"
                        style="width: 200px; max-width: 600px; border-radius: 8px 8px 0 0;"
                      />
                    </div>
              
                    <h1 style="color: #4a4a4a; text-align: center">
                      New Purchase Notification
                    </h1>
              
                    <p>
                      A new purchase has been made for your event
                      <strong>{{EVENT_NAME}}</strong>.
                    </p>
              
                    <div
                      style="
                        background-color: #f9f9f9;
                        border: 1px solid #ddd;
                        padding: 15px;
                        margin: 20px 0;
                        border-radius: 5px;
                      "
                    >
                      <p><strong>Booking ID:</strong> {{BOOKING_ID}}</p>
                      <p><strong>Purchase Date:</strong> {{PURCHASE_DATE}}</p>
                      <p><strong>Customer:</strong> {{CUSTOMER_NAME}}</p>
                      <p><strong>Email:</strong> {{CUSTOMER_EMAIL}}</p>
                    </div>
              
                    <h3>Purchased Tickets:</h3>
                    <table style="width: 100%; border-collapse: collapse">
                      <thead>
                        <tr style="background-color: #f2f2f2">
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Ticket Type
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Quantity
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Price
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Total
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {{TICKET_ROWS}}
                      </tbody>
                    </table>
              
                    {{#if ACTIVITY_ROWS}}
                    <h3>Purchased Activities:</h3>
                    <table style="width: 100%; border-collapse: collapse">
                      <thead>
                        <tr style="background-color: #f2f2f2">
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Activity
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Quantity
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Price
                          </th>
                          <th
                            style="
                              padding: 10px;
                              text-align: left;
                              border-bottom: 2px solid #ddd;
                            "
                          >
                            Total
                          </th>
                        </tr>
                      </thead>
                      <tbody>
                        {{ACTIVITY_ROWS}}
                      </tbody>
                    </table>
                    {{/if}}
              
                    <div
                      style="margin-top: 20px; border-top: 1px solid #eee; padding-top: 15px"
                    >
                      <p style="text-align: right; font-size: 1.2em">
                        <strong>Total Amount: {{TOTAL_AMOUNT}}</strong>
                      </p>
                    </div>
              
                    <p style="margin-top: 30px">
                      You can view the full details of this purchase in your organizer
                      dashboard.
                    </p>
              
                    <p style="color: #555555; font-size: 15px; margin-top: 20px;">Best regards,<br />{{SIGNATURE}}</p>
              
                    <div
                      style="
                        margin-top: 30px;
                        padding-top: 20px;
                        border-top: 1px solid #eee;
                        font-size: 0.8em;
                        color: #777;
                        text-align: center;
                      "
                    >
                      {{FOOTER}}
                    </div>
                  </body>
                </html>