<?php
/**
 * Base template for the invitation-email.
 *
 * This template is used to invite users to receive periodic performance reports.
 *
 * @package   Google\Site_Kit\Core\Email_Reporting
 * @copyright 2026 Google LLC
 * @license   https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
 * @link      https://sitekit.withgoogle.com
 *
 * @var array $data All template data including metadata.
 */

// Extract metadata from data.
$subject            = $data['subject'];
$preheader          = $data['preheader'];
$site_domain        = $data['site']['domain'];
$site_url           = $data['site']['url'];
$email_title        = $data['title'];
$body               = $data['body'];
$inviter_email      = $data['inviter_email'];
$learn_more_url     = $data['learn_more_url'];
$primary_cta        = $data['primary_call_to_action'];
$footer_copy        = $data['footer']['copy'];
$get_asset_url      = $data['get_asset_url'];
$render_part        = $data['render_part'];
$render_shared_part = $data['render_shared_part'];

$envelope_url = $get_asset_url( 'invitation-envelope-graphic' );

// Replace the email placeholder in the title (the <a> tag is already in Content_Map).
$email_title = sprintf( $email_title, esc_attr( $inviter_email ) );
?>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
	<meta name="viewport" content="width=device-width" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<?php /* Enable dark mode support in email clients that honor these meta tags. */ ?>
	<meta name="color-scheme" content="light dark" />
	<meta name="supported-color-schemes" content="light dark" />
	<?php /* Outlook requires this VML to prevent visual bugs when DPI is scaled on Windows. */ ?>
	<!--[if gte mso 9]>
	<xml>
		<o:OfficeDocumentSettings>
			<o:AllowPNG/>
			<o:PixelsPerInch>96</o:PixelsPerInch>
		</o:OfficeDocumentSettings>
	</xml>
	<![endif]-->
	<title><?php echo esc_html( $subject ); ?></title>
	<style>
		<?php $render_shared_part( 'styles' ); ?>
	</style>
</head>
<body>
	<span class="preheader"><?php echo esc_html( $preheader ); ?></span>
	<?php /* Outlook centering: use fixed-width table wrapper. */ ?>
	<!--[if mso]>
	<table role="presentation" align="center" width="520" cellpadding="0" cellspacing="0" border="0" style="width:520px;">
	<tr>
	<td align="center">
	<![endif]-->
	<table role="presentation" class="body" align="center" width="100%" style="max-width: 520px; margin: 0 auto;">
		<tr>
			<td>&nbsp;</td>
			<td class="container" align="center">
				<table role="presentation" class="main" align="center">
					<tr>
						<td class="wrapper">
							<?php
							// Render header (Site Kit logo).
							$render_part(
								'header',
								array(
									'get_asset_url' => $get_asset_url,
								)
							);
							?>
							<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
								<tr>
									<td class="card" style="background-color: #FFFFFF; border-radius: 16px; padding: 24px 16px 0 16px;">
										<?php /* Site domain. */ ?>
										<p style="font-size: 14px; line-height: 20px; font-weight: 400; color: #6C726E; margin: 0 0 8px 0;">
											<a class="text-secondary" href="<?php echo esc_url( $site_url ); ?>" style="color: #6C726E; text-decoration: none;"><?php echo esc_html( $site_domain ); ?></a>
										</p>

										<?php /* Title from Content_Map with inviter email link. */ ?>
										<h1 class="text-primary" style="font-size: 16px; line-height: 24px; font-weight: 500; color: #161B18; margin: 0 0 16px 0;">
											<?php
											// phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Contains pre-escaped mailto link.
											echo $email_title;
											?>
										</h1>

										<?php /* Body paragraphs from Content_Map. */ ?>
										<?php foreach ( $body as $index => $paragraph ) : ?>
										<p class="text-primary" style="font-size: 14px; line-height: 20px; font-weight: 400; color: #161B18; margin: 0 0 <?php echo count( $body ) - 1 === $index ? '20px' : '16px'; ?> 0;">
											<?php echo esc_html( $paragraph ); ?>
											<?php if ( 0 === $index && ! empty( $learn_more_url ) ) : ?>
											<a class="link" href="<?php echo esc_url( $learn_more_url ); ?>" style="color: #108080; text-decoration: none;" target="_blank" rel="noopener"><?php echo esc_html__( 'Learn more', 'google-site-kit' ); ?></a>
											<?php endif; ?>
										</p>
										<?php endforeach; ?>

										<?php /* CTA Button. */ ?>
										<table role="presentation" cellpadding="0" cellspacing="0" border="0" style="margin-top: 4px; margin-bottom: 12px;">
											<tr>
												<td>
													<?php
													$render_shared_part(
														'dashboard-link',
														array(
															'url'   => $primary_cta['url'],
															'label' => isset( $primary_cta['label'] ) ? $primary_cta['label'] : __( 'Get your report', 'google-site-kit' ),
														)
													);
													?>
												</td>
											</tr>
										</table>

										<?php /* Envelope illustration. */ ?>
										<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
											<tr>
												<td align="center" style="height: 163px;">
													<img src="<?php echo esc_url( $envelope_url ); ?>" alt="" width="209" height="163" style="display: block; max-width: 100%; height: auto;" />
												</td>
											</tr>
										</table>
									</td>
								</tr>
							</table>

							<?php /* Footer text. */ ?>
							<table role="presentation" width="100%" style="margin-top: 12px;">
								<tr>
									<td style="text-align: left;">
										<p class="text-secondary" style="font-size: 12px; line-height: 16px; font-weight: 500; color: #6C726E; margin: 0;">
											<?php echo esc_html( $footer_copy ); ?>
										</p>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</td>
			<td>&nbsp;</td>
		</tr>
	</table>
	<!--[if mso]>
	</td>
	</tr>
	</table>
	<![endif]-->
</body>
</html>
