<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{subject}}</title>
    <style>
      /* Reset styles */
      body,
      table,
      td,
      p,
      a,
      li,
      blockquote {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
      }
      table,
      td {
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      img {
        -ms-interpolation-mode: bicubic;
        border: 0;
        height: auto;
        line-height: 100%;
        outline: none;
        text-decoration: none;
      }

      /* Base styles */
      body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #f5f5f5;
        font-family:
          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
          Arial, sans-serif;
      }

      /* Container */
      .email-wrapper {
        width: 100%;
        max-width: 600px;
        margin: 0 auto;
        background-color: #ffffff;
      }

      /* Header */
      .email-header {
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        padding: 40px 30px;
        text-align: center;
      }

      .logo {
        color: #ffffff;
        font-size: 28px;
        font-weight: bold;
        text-decoration: none;
        letter-spacing: -0.5px;
      }

      .logo span {
        font-weight: 300;
      }

      /* Content */
      .email-content {
        padding: 40px 30px;
        color: #374151;
        font-size: 16px;
        line-height: 1.6;
      }

      .email-title {
        color: #111827;
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 20px 0;
      }

      .email-subtitle {
        color: #6b7280;
        font-size: 18px;
        margin: 0 0 30px 0;
      }

      /* Status Badge */
      .status-badge {
        display: inline-block;
        padding: 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      .status-approved {
        background-color: #d1fae5;
        color: #065f46;
      }

      .status-rejected {
        background-color: #fee2e2;
        color: #991b1b;
      }

      .status-pending {
        background-color: #fef3c7;
        color: #92400e;
      }

      .status-expired {
        background-color: #f3f4f6;
        color: #4b5563;
      }

      /* CTA Button */
      .cta-button {
        display: inline-block;
        background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
        color: #ffffff !important;
        text-decoration: none;
        padding: 14px 32px;
        border-radius: 8px;
        font-weight: 600;
        font-size: 16px;
        margin: 20px 0;
      }

      /* Info Box */
      .info-box {
        background-color: #fff7ed;
        border-left: 4px solid #f97316;
        padding: 20px;
        margin: 20px 0;
        border-radius: 0 8px 8px 0;
      }

      .info-box-title {
        color: #c2410c;
        font-weight: 600;
        margin: 0 0 10px 0;
      }

      /* Detail Cards */
      .detail-card {
        background-color: #f9fafb;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        padding: 20px;
        margin: 20px 0;
      }

      .detail-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #e5e7eb;
      }

      .detail-row:last-child {
        border-bottom: none;
      }

      .detail-label {
        color: #6b7280;
        font-size: 14px;
      }

      .detail-value {
        color: #111827;
        font-weight: 600;
        font-size: 14px;
      }

      /* Amount Display */
      .amount-display {
        text-align: center;
        padding: 30px;
        background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
        border-radius: 12px;
        margin: 20px 0;
      }

      .amount-label {
        color: #9a3412;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
      }

      .amount-value {
        color: #c2410c;
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
      }

      .amount-currency {
        color: #ea580c;
        font-size: 24px;
        vertical-align: super;
      }

      /* Footer */
      .email-footer {
        background-color: #f9fafb;
        padding: 30px;
        text-align: center;
        border-top: 1px solid #e5e7eb;
      }

      .footer-links {
        margin-bottom: 20px;
      }

      .footer-links a {
        color: #6b7280;
        text-decoration: none;
        margin: 0 15px;
        font-size: 14px;
      }

      .footer-links a:hover {
        color: #f97316;
      }

      .social-links {
        margin: 20px 0;
      }

      .social-links a {
        display: inline-block;
        width: 40px;
        height: 40px;
        background-color: #e5e7eb;
        border-radius: 50%;
        margin: 0 8px;
        text-align: center;
        line-height: 40px;
        color: #6b7280;
        text-decoration: none;
      }

      .footer-text {
        color: #9ca3af;
        font-size: 12px;
        line-height: 1.5;
      }

      .footer-address {
        color: #9ca3af;
        font-size: 12px;
        margin-top: 10px;
      }

      /* Responsive */
      @media screen and (max-width: 600px) {
        .email-content {
          padding: 30px 20px;
        }

        .email-title {
          font-size: 20px;
        }

        .amount-value {
          font-size: 36px;
        }
      }
    </style>
  </head>
  <body>
    <table
      role="presentation"
      cellspacing="0"
      cellpadding="0"
      border="0"
      width="100%"
    >
      <tr>
        <td align="center" style="padding: 20px 0">
          <div class="email-wrapper">
            <!-- Header -->
            <div class="email-header">
              <a href="https://nxtgauge.com">
                <img
                  src="https://nxtgauge.com/nxtgauge-logo.png"
                  alt="Nxtgauge"
                  style="height: 50px; width: auto; border: 0"
                />
              </a>
            </div>

            <!-- Dynamic Content -->
            <div class="email-content">{{content}}</div>

            <!-- Footer -->
            <div class="email-footer">
              <div class="footer-links">
                <a href="https://nxtgauge.com/help">Help Center</a>
                <a href="https://nxtgauge.com/contact">Contact Us</a>
                <a href="https://nxtgauge.com/privacy">Privacy Policy</a>
              </div>

              <div class="footer-text">
                <p>
                  You're receiving this email because you have an account on
                  Nxtgauge.
                </p>
                <p>© 2026 Traceworks Technologies LLP. All rights reserved.</p>
              </div>

              <div class="footer-address">
                <p>Traceworks Technologies LLP.</p>
                <p>13th main road, Anna nagar west, Chennai - 600040</p>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </table>
  </body>
</html>
