<!doctype html>
<html
  lang="en"
  xmlns="http://www.w3.org/1999/xhtml"
  xmlns:v="urn:schemas-microsoft-com:vml"
  xmlns:o="urn:schemas-microsoft-com:office:office"
>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Interview Invitation — {{subject}}</title>
    <!--[if mso]>
      <noscript>
        <xml>
          <o:OfficeDocumentSettings>
            <o:PixelsPerInch>96</o:PixelsPerInch>
          </o:OfficeDocumentSettings>
        </xml>
      </noscript>
    <![endif]-->
    <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 {
        -ms-interpolation-mode: bicubic;
        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: #f8f9fa;
        font-family: 'Roboto', 'Segoe UI', Arial, sans-serif;
        color: #202124;
      }

      .email-wrapper {
        width: 100%;
        background-color: #f8f9fa;
        padding: 32px 12px;
      }

      .email-container {
        max-width: 620px;
        margin: 0 auto;
        background-color: #ffffff;
        border: 1px solid #dadce0;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(60, 64, 67, 0.08);
      }

      /* Top Banner Notice */
      .top-notice {
        background-color: #f1f3f4;
        border-bottom: 1px solid #e8eaed;
        padding: 12px 24px;
        font-size: 13px;
        color: #3c4043;
        line-height: 1.5;
      }
      .top-notice strong {
        color: #202124;
      }

      /* Card Main Section */
      .card-body {
        padding: 28px 32px;
      }

      /* Header Table */
      .header-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 24px;
      }
      .event-title {
        font-size: 20px;
        font-weight: 600;
        color: #202124;
        margin: 0 0 4px 0;
        line-height: 1.3;
      }
      .event-org {
        font-size: 13px;
        color: #5f6368;
        margin: 0;
      }
      .join-btn {
        display: inline-block;
        background-color: #1a73e8;
        color: #ffffff !important;
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
        padding: 10px 24px;
        border-radius: 6px;
        white-space: nowrap;
        text-align: center;
      }

      /* Details Grid Table */
      .details-table {
        width: 100%;
        border-collapse: collapse;
      }
      .details-table td {
        padding: 10px 0;
        vertical-align: top;
      }
      .detail-label {
        font-size: 13px;
        font-weight: 700;
        color: #3c4043;
        width: 110px;
      }
      .detail-value {
        font-size: 14px;
        color: #202124;
        line-height: 1.5;
      }
      .detail-subtext {
        font-size: 13px;
        color: #5f6368;
      }
      .meeting-link {
        color: #1a73e8;
        text-decoration: none;
        word-break: break-all;
        font-weight: 500;
      }

      /* RSVP Buttons Row */
      .rsvp-section {
        border-top: 1px solid #f1f3f4;
        padding-top: 18px;
        margin-top: 20px;
      }
      .rsvp-label {
        font-size: 13px;
        color: #5f6368;
        margin-bottom: 10px;
      }
      .rsvp-btn {
        display: inline-block;
        padding: 6px 20px;
        border: 1px solid #dadce0;
        border-radius: 18px;
        font-size: 13px;
        font-weight: 500;
        color: #3c4043;
        margin-right: 8px;
        margin-bottom: 6px;
        text-decoration: none;
        background-color: #ffffff;
      }

      /* Instructions Box */
      .instructions-container {
        padding: 0 32px 28px 32px;
      }
      .instructions-box {
        background-color: #f8f9fa;
        border: 1px solid #e8eaed;
        border-radius: 8px;
        padding: 20px;
      }
      .instructions-title {
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #5f6368;
        margin: 0 0 10px 0;
      }
      .rich-content {
        font-size: 14px;
        color: #3c4043;
        line-height: 1.6;
      }
      .rich-content p {
        margin: 0 0 8px 0;
      }
      .rich-content p:last-child {
        margin-bottom: 0;
      }

      /* Signature & Footer */
      .signature-section {
        padding: 0 32px 20px 32px;
        font-size: 13px;
        color: #5f6368;
        line-height: 1.6;
      }
      .signature-name {
        font-weight: 700;
        color: #202124;
      }
      .footer-section {
        border-top: 1px solid #f1f3f4;
        padding: 20px 32px 28px 32px;
        font-size: 12px;
        color: #70757a;
        line-height: 1.6;
        text-align: center;
      }
      .footer-section a {
        color: #1a73e8;
        text-decoration: none;
      }

      @media only screen and (max-width: 600px) {
        .card-body,
        .instructions-container,
        .signature-section,
        .footer-section {
          padding-left: 20px !important;
          padding-right: 20px !important;
        }
        .header-table td {
          display: block !important;
          width: 100% !important;
        }
        .join-btn-cell {
          margin-top: 16px;
          text-align: left !important;
        }
        .join-btn {
          display: block !important;
          width: 100% !important;
          box-sizing: border-box;
        }
      }
    </style>
  </head>
  <body>
    <div class="email-wrapper">
      <table
        role="presentation"
        class="email-container"
        width="100%"
        cellpadding="0"
        cellspacing="0"
        border="0"
      >
        <!-- Top Notice Bar -->
        <tr>
          <td class="top-notice">
            <strong>Interview Invitation:</strong> {{subject}}
          </td>
        </tr>

        <!-- Card Main Body -->
        <tr>
          <td class="card-body">
            <!-- Header Table with Title & Join Button -->
            <table
              role="presentation"
              class="header-table"
              cellpadding="0"
              cellspacing="0"
              border="0"
            >
              <tr>
                <td style="vertical-align: middle;">
                  <h1 class="event-title">{{subject}}</h1>
                  <p class="event-org">{{company_name}} · Hiring Team</p>
                </td>
                <td class="join-btn-cell" style="vertical-align: middle; text-align: right; width: 200px;">
                  <a href="{{meeting_link}}" class="join-btn">{{join_button_text}}</a>
                </td>
              </tr>
            </table>

            <!-- Details Grid Table -->
            <table
              role="presentation"
              class="details-table"
              cellpadding="0"
              cellspacing="0"
              border="0"
            >
              <tr>
                <td class="detail-label">When</td>
                <td class="detail-value">
                  <strong>{{interview_date}} · {{interview_time}}</strong> ({{timezone}})
                </td>
              </tr>
              <tr>
                <td class="detail-label">Meeting link</td>
                <td class="detail-value">
                  <a href="{{meeting_link}}" class="meeting-link">{{meeting_link_display}}</a>
                </td>
              </tr>
              <tr>
                <td class="detail-label">Organizer</td>
                <td class="detail-value">
                  <strong>{{sender_name}}</strong><br />
                  <span class="detail-subtext">{{company_name}}</span>
                </td>
              </tr>
              <tr>
                <td class="detail-label">Guests</td>
                <td class="detail-value">
                  <strong>{{candidate_name}}</strong> &lt;{{candidate_email}}&gt;<br />
                  <span class="detail-subtext">Interviewers: {{interviewer_name}}</span>
                </td>
              </tr>
              <tr>
                <td class="detail-label">Format</td>
                <td class="detail-value">
                  {{interview_type}} — via <strong>{{platform_name}}</strong> ({{duration}})
                </td>
              </tr>
            </table>

            <!-- RSVP Row -->
            <div class="rsvp-section">
              <div class="rsvp-label">Reply for {{candidate_email}}</div>
              <span class="rsvp-btn">Yes</span>
              <span class="rsvp-btn">No</span>
              <span class="rsvp-btn">Maybe</span>
            </div>
          </td>
        </tr>

        <!-- Instructions Box (if any) -->
        <tr>
          <td class="instructions-container">
            <div class="instructions-box">
              <div class="instructions-title">Interview Instructions &amp; Notes</div>
              <div class="rich-content">{{instructions}}</div>
            </div>
          </td>
        </tr>

        <!-- Signature Section -->
        <tr>
          <td class="signature-section">
            <p>
              Looking forward to speaking with you. If you have any questions, feel free to reply to this email.
            </p>
            <p style="margin-top: 16px;">
              <span class="signature-name">{{sender_name}}</span><br />
              <span style="color: #5f6368;">{{sender_role}} · {{company_name}}</span>
            </p>
          </td>
        </tr>

        <!-- Footer -->
        <tr>
          <td class="footer-section">
            <p style="margin: 0;">
              Invitation from <strong>{{company_name}}</strong> · {{company_address}}
            </p>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>

