<?php
/**
 * Template card partial.
 *
 * @package    100Prints
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

$template = isset( $args['template'] ) ? $args['template'] : [];
if ( empty( $template ) ) {
	return;
}

$id = $template['id'];
$name = $template['name'];
$category = isset( $template['category'] ) ? $template['category'] : 'document';
$source = isset( $template['source'] ) ? $template['source'] : 'cloud';
$variables = isset( $template['variables'] ) ? $template['variables'] : [];

// Determine thumbnail URL
$thumbnail_url = HUNDRED_PRINTS_URL . 'assets/images/thumbnails/' . $id . '.png';
if ( $source === 'cloud' ) {
	// For cloud templates, fall back to standard asset icon or placeholder
	$thumbnail_url = HUNDRED_PRINTS_URL . 'assets/images/thumbnails/participant-certificate.png';
}
?>

<div class="hundredp-template-card" data-id="<?php echo esc_attr( $id ); ?>">
	<div class="hundredp-template-thumbnail">
		<img src="<?php echo esc_url( $thumbnail_url ); ?>" alt="<?php echo esc_attr( $name ); ?>" loading="lazy" />
	</div>
	
	<div class="hundredp-template-content">
		<h4><?php echo esc_html( $name ); ?></h4>
		
		<div class="hundredp-template-badges">
			<span class="hundredp-badge <?php echo $source === 'cloud' ? 'hundredp-badge-success' : 'hundredp-badge-neutral'; ?>">
				<?php echo esc_html( ucfirst( $source ) ); ?>
			</span>
			<span class="hundredp-badge hundredp-badge-neutral">
				<?php echo esc_html( ucfirst( $category ) ); ?>
			</span>
		</div>
		
		<?php if ( ! empty( $variables ) ) : ?>
			<div class="hundredp-template-vars">
				<?php foreach ( $variables as $var ) : ?>
					<span class="hundredp-var-chip">{{<?php echo esc_html( $var ); ?>}}</span>
				<?php endforeach; ?>
			</div>
		<?php endif; ?>
		
		<div class="hundredp-template-actions">
			<button type="button" class="hundredp-btn hundredp-btn-primary hundredp-btn-full hundredp-btn-preview" 
				data-id="<?php echo esc_attr( $id ); ?>" 
				data-name="<?php echo esc_attr( $name ); ?>"
				data-source="<?php echo esc_attr( $source ); ?>">
				<i class="ph-bold ph-eye"></i> Preview
			</button>
		</div>
	</div>
</div>
