<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Purchase Confirmation</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">Purchase Confirmation</h1>

    <p>Hello {{CUSTOMER_NAME}},</p>

    <p>
      Thank you for your purchase! Your tickets for
      <strong>{{EVENT_NAME}}</strong> have been confirmed.
    </p>
    {{#if CUSTOM_SUCCESS_MESSAGE}}<p>{{CUSTOM_SUCCESS_MESSAGE}}</p>{{/if}}
 
    <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>
    </div>

    <h3>Your 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>Your 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"
    >
      <table style="width: 100%; text-align: right">
        <tr>
          <td style="padding: 5px"><strong>Subtotal:</strong></td>
          <td style="padding: 5px">{{SUBTOTAL}}</td>
        </tr>
        <tr>
          <td style="padding: 5px"><strong>Tax:</strong></td>
          <td style="padding: 5px">{{TAX}}</td>
        </tr>
        <tr>
          <td style="padding: 5px"><strong>Discount:</strong></td>
          <td style="padding: 5px">-{{DISCOUNT}}</td>
        </tr>
        <tr style="font-size: 1.2em">
          <td style="padding: 5px"><strong>Total:</strong></td>
          <td style="padding: 5px"><strong>{{TOTAL_AMOUNT}}</strong></td>
        </tr>
      </table>
    </div>

    <p style="margin-top: 30px">We look forward to seeing you at the event!</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>
