<?php 
defined( 'ABSPATH' ) || exit; 
// $cafi_templates available via helper
$cafi_templates = cafi_get_templates();
$cafi_current_template = isset( $cafi_options['template'] ) ? $cafi_options['template'] : '';
?>

<!-- Header -->
<div class="afi-templates-header">

    <h2 class="afi-title" style="font-size: 2rem; margin-bottom: 0.75rem;">Select a Layout</h2>
    <p class="afi-subtitle" style="max-width: 600px; line-height: 1.5;">
        Choose how your featured images will look. You can customize colors and fonts later to match your brand perfectly.
    </p>
</div>

<!-- Category Filters -->
<nav class="afi-template-filter-nav">
    <button type="button" class="afi-filter-btn active" data-filter="all">
        <span class="material-symbols-outlined">check</span>
        All
    </button>
    <button type="button" class="afi-filter-btn" data-filter="business">Business & Corporate</button>
    <button type="button" class="afi-filter-btn" data-filter="tech">Tech & Modern</button>
    <button type="button" class="afi-filter-btn" data-filter="lifestyle">Lifestyle & Creative</button>
    <button type="button" class="afi-filter-btn" data-filter="minimal">Minimal & Abstract</button>
    <button type="button" class="afi-filter-btn" data-filter="solid">Solid Color</button>
    <button type="button" class="afi-filter-btn" data-filter="gradient">Gradients</button>
</nav>

<!-- Template Grid -->
<div class="afi-template-grid">
    <?php foreach ( $cafi_templates as $cafi_template ) : 
        $cafi_is_active = ($cafi_current_template === $cafi_template['id']);
        $cafi_type = isset($cafi_template['type']) ? $cafi_template['type'] : 'file';
        $cafi_val = $cafi_template['value'];
        
        // Inline Style for Preview BG
        $cafi_bg_style = '';
        if ($cafi_type === 'color') {
            $cafi_bg_style = 'background-color: ' . esc_attr($cafi_val) . ';';
        } elseif ($cafi_type === 'gradient') {
            // value format: hex1,hex2,direction  (e.g. #000,#fff,vertical)
            $cafi_parts = explode(',', $cafi_val);
            if (count($cafi_parts) >= 3) {
                 // Convert direction to CSS syntax
                 $cafi_dir = trim($cafi_parts[count($cafi_parts)-1]);
                 $cafi_css_dir = ($cafi_dir === 'vertical') ? 'to bottom' : 'to right';
                 
                 // Extract colors (all parts except last)
                 $cafi_colors = array_slice($cafi_parts, 0, count($cafi_parts)-1);
                 $cafi_color_str = implode(', ', $cafi_colors);
                 
                 $cafi_bg_style = 'background-image: linear-gradient(' . $cafi_css_dir . ', ' . $cafi_color_str . ');';
            } else {
                 $cafi_bg_style = 'background: ' . esc_attr($cafi_parts[0]) . ';'; // Fallback
            }
        } else {
            $cafi_bg_style = 'background-image: url(\'' . esc_url($cafi_val) . '\');';
        }
    ?>
    
    <!-- Template Card -->
    <div class="afi-template-card-new <?php echo $cafi_is_active ? 'active' : ''; ?>" 
         data-id="<?php echo esc_attr($cafi_template['id']); ?>"
         data-type="<?php echo esc_attr($cafi_type); ?>"
         data-value="<?php echo esc_attr($cafi_val); ?>"
         data-name="<?php echo esc_attr($cafi_template['name']); ?>"
         data-category="<?php echo esc_attr($cafi_template['category']); ?>"
         data-settings="<?php echo isset($cafi_template['settings']) ? esc_attr(wp_json_encode($cafi_template['settings'])) : ''; ?>">
        
        <!-- Hero/Image Area -->
        <div class="afi-card-hero" style="<?php echo esc_attr( $cafi_bg_style ); ?>">
             <?php if($cafi_is_active): ?>
                <div class="afi-active-badge">
                    <span class="material-symbols-outlined" style="font-size:14px;">check</span>
                    Active
                </div>
            <?php endif; ?>
        </div>
        
        <!-- Card Body -->
        <div class="afi-card-body">
            <div class="afi-card-row-top">
                <h3 class="afi-card-title"><?php echo esc_html($cafi_template['name']); ?></h3>
                <div class="afi-card-status-dot <?php echo $cafi_is_active ? 'active' : ''; ?>"></div>
            </div>
            <div class="afi-card-desc"><?php echo ($cafi_type === 'color') ? 'Solid Color Background' : 'Image Background Template'; ?></div>
        </div>
    </div>
    <?php endforeach; ?>
</div>
