<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Interview Schedule Cancellation</title>
    <style>
      body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
      table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
      img { border: 0; height: auto; line-height: 100%; outline: none; text-decoration: none; }
      body { margin: 0; padding: 0; width: 100% !important; height: 100% !important; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
    </style>
  </head>
  <body style="margin: 0; padding: 0; width: 100% !important; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #334155;">
    <div style="width: 100%; background-color: #f8fafc; padding: 32px 12px; box-sizing: border-box;">
      <table
        role="presentation"
        width="100%"
        cellpadding="0"
        cellspacing="0"
        border="0"
        align="center"
        style="max-width: 580px; margin: 0 auto; background-color: #ffffff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05);"
      >
        <!-- Header Banner -->
        <tr>
          <td style="background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); padding: 28px 32px; text-align: left;">
            <div style="display: inline-block; background-color: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.3); color: #fca5a5; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px;">
              Interview Notice
            </div>
            <h1 style="margin: 0; color: #ffffff; font-size: 20px; line-height: 1.3; font-weight: 700;">
              Interview Schedule Cancellation
            </h1>
            <p style="margin: 4px 0 0 0; color: #94a3b8; font-size: 13px; font-weight: 500;">
              {{company_name}} · Hiring Team
            </p>
          </td>
        </tr>

        <!-- Main Content -->
        <tr>
          <td style="padding: 28px 32px 20px 32px;">
            <!-- Candidate Greeting -->
            <p style="margin: 0 0 14px 0; font-size: 15px; font-weight: 600; color: #0f172a; line-height: 1.5;">
              Dear {{candidate_name}},
            </p>

            <!-- Intro Statement with Highlighted Variables -->
            <p style="margin: 0 0 20px 0; font-size: 14px; color: #475569; line-height: 1.6;">
              We are writing to inform you that your upcoming interview for the
              <span style="background-color: #f1f5f9; border: 1px solid #cbd5e1; border-radius: 4px; padding: 2px 7px; font-size: 13px; font-weight: 600; color: #0f172a;">{{job_title}}</span>
              position at
              <span style="font-weight: 600; color: #0f172a;">{{company_name}}</span>
              originally scheduled for
              <span style="background-color: #fef2f2; border: 1px solid #fecdd3; border-radius: 4px; padding: 2px 7px; font-size: 13px; font-weight: 600; color: #9f1239;">{{interview_date}} at {{interview_time}}</span>
              has been cancelled.
            </p>

            <!-- Previously Scheduled Box -->
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-bottom: 18px;">
              <tr>
                <td style="background-color: #f8fafc; border: 1px solid #e2e8f0; border-left: 4px solid #64748b; border-radius: 6px; padding: 12px 16px;">
                  <p style="margin: 0 0 3px 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b;">
                    Previous Schedule
                  </p>
                  <p style="margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; line-height: 1.4;">
                    📅 {{interview_date}} at {{interview_time}}
                  </p>
                </td>
              </tr>
            </table>

            <!-- Cancellation Reason (Injected HTML block, non-bold body text) -->
            {{cancellation_reason}}

            <!-- Apology & Follow-up Note -->
            <p style="margin: 16px 0 0 0; font-size: 14px; color: #475569; line-height: 1.6;">
              We sincerely apologize for any inconvenience this may cause to your schedule. Our hiring team will follow up with you regarding next steps or rescheduling options if applicable.
            </p>
          </td>
        </tr>

        <!-- Divider Line -->
        <tr>
          <td style="padding: 0 32px;">
            <div style="height: 1px; background-color: #e2e8f0; width: 100%;"></div>
          </td>
        </tr>

        <!-- Signature Block -->
        <tr>
          <td style="padding: 20px 32px 24px 32px;">
            <p style="margin: 0 0 12px 0; font-size: 14px; color: #475569; line-height: 1.5;">
              Thank you for your understanding.
            </p>
            <p style="margin: 0; font-size: 14px; font-weight: 700; color: #0f172a; line-height: 1.3;">
              {{sender_name}}
            </p>
            <p style="margin: 2px 0 0 0; font-size: 13px; color: #64748b; line-height: 1.4;">
              {{sender_role}} · {{company_name}}
            </p>
          </td>
        </tr>

        <!-- Footer Footer -->
        <tr>
          <td style="background-color: #f8fafc; padding: 16px 32px; text-align: center; border-top: 1px solid #f1f5f9;">
            <p style="margin: 0; font-size: 12px; color: #94a3b8; line-height: 1.5;">
              {{company_name}} · {{company_address}}
            </p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
