<?php
/**
 * View: Premium Templates Library (Premium UI)
 */

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

<style>
    /* Global Reset & Typography */
    .pex-premium-wrap { 
        max-width: 1400px; 
        margin: 25px 0 0 0; 
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; 
        color: #334155; 
    }
    
    /* Hero Section (Brand Green) */
    .pex-hero { 
        background: linear-gradient(135deg, #0f5132 0%, #064e3b 100%); 
        color: #fff; 
        padding: 45px 50px; 
        border-radius: 16px; 
        margin-bottom: 35px; 
        box-shadow: 0 15px 35px -5px rgba(6, 78, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.1); 
        display: flex; 
        align-items: center; 
        justify-content: space-between;
        position: relative;
        overflow: hidden;
    }
    .pex-hero::after {
        content: '';
        position: absolute;
        top: 0; right: 0; bottom: 0; left: 0;
        background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="40" fill="rgba(255,255,255,0.03)"/></svg>') repeat;
        opacity: 0.8;
        pointer-events: none;
    }
    .pex-hero-text { position: relative; z-index: 2; }
    .pex-hero h1 { color: #fff; margin: 0 0 10px 0; font-size: 30px; font-weight: 800; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); }
    .pex-hero p { margin: 0; font-size: 16px; color: #d1fae5; line-height: 1.6; max-width: 650px; font-weight: 400; }

    /* Template Grid */
    .pex-template-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
        margin-bottom: 40px;
    }
    @media (max-width: 1200px) { .pex-template-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 900px) { .pex-template-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 600px) { .pex-template-grid { grid-template-columns: 1fr; } }

    /* Template Card */
    .pex-tpl-card {
        background: #ffffff;
        border-radius: 16px;
        border: 1px solid #eef2f6;
        box-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.02), 0 2px 4px -1px rgba(15, 23, 42, 0.02);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        position: relative;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .pex-tpl-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 25px -5px rgba(15, 23, 42, 0.05), 0 8px 10px -5px rgba(15, 23, 42, 0.02);
        border-color: #e2e8f0;
    }

    /* Badges */
    .pex-tpl-badge {
        position: absolute;
        top: 16px;
        right: 16px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 6px 12px;
        border-radius: 20px;
        z-index: 10;
        border: 1px solid rgba(255,255,255,0.5);
    }
    .badge-general { background: #f1f5f9; color: #475569; }
    .badge-news { background: #eff6ff; color: #2563eb; }
    .badge-sales { background: #ecfdf5; color: #059669; }
    .badge-event { background: #f5f3ff; color: #7c3aed; }
    .badge-alert { background: #fffbeb; color: #d97706; }

    /* Preview Box (Miniature Wireframes) */
    .pex-tpl-preview {
        background: #f8fafc;
        height: 190px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid #eef2f6;
        position: relative;
    }
    .pex-tpl-card:hover .pex-tpl-preview { background: #f1f5f9; }

    /* CSS Email Wireframes */
    .m-email {
        width: 140px;
        background: #ffffff;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.04);
        padding: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        border: 1px solid #e2e8f0;
        transition: transform 0.3s ease;
    }
    .pex-tpl-card:hover .m-email { transform: scale(1.05); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
    
    .m-head { height: 12px; border-radius: 3px; background: #e2e8f0; width: 100%; }
    .m-title { height: 8px; border-radius: 2px; background: #94a3b8; width: 60%; margin: 4px 0; }
    .m-line { height: 4px; border-radius: 2px; background: #cbd5e1; width: 100%; }
    .m-line.short { width: 70%; }
    .m-hero { height: 35px; border-radius: 4px; background: #e2e8f0; width: 100%; margin: 2px 0; }
    .m-btn { height: 16px; border-radius: 4px; background: #10b981; width: 50%; margin-top: 6px; }
    .m-circle { width: 24px; height: 24px; border-radius: 50%; background: #e2e8f0; margin: 0 auto; }
    .m-grid { display: flex; gap: 6px; width: 100%; margin: 2px 0; }
    .m-grid-box { flex: 1; height: 24px; border-radius: 3px; background: #e2e8f0; }

    /* Card Body */
    .pex-tpl-body {
        padding: 24px;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .pex-tpl-body h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 800; color: #0f172a; letter-spacing: -0.3px; }
    .pex-tpl-body p { margin: 0 0 20px 0; font-size: 13.5px; line-height: 1.6; color: #64748b; flex-grow: 1; }

    /* Select Button */
    .pex-btn-select {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px;
        background: #ffffff;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        color: #1e293b;
        font-weight: 700;
        font-size: 14px;
        text-decoration: none;
        transition: all 0.2s ease;
        box-sizing: border-box;
    }
    .pex-btn-select svg { transition: transform 0.2s ease; }
    .pex-tpl-card:hover .pex-btn-select {
        background: #0f172a;
        color: #ffffff;
        border-color: #0f172a;
        box-shadow: 0 4px 6px rgba(15, 23, 42, 0.2);
    }
    .pex-tpl-card:hover .pex-btn-select svg { transform: translateX(4px); }
</style>

<div class="wrap pex-premium-wrap">

    <div class="pex-hero">
        <div class="pex-hero-text">
            <h1><?php esc_html_e( 'Premium Templates Library', 'pexally-email-campaigns' ); ?></h1>
            <p><?php esc_html_e( 'Select a beautifully crafted layout for your next campaign. All templates automatically inherit your global branding, logo, and footer settings.', 'pexally-email-campaigns' ); ?></p>
        </div>
    </div>

    <div class="pex-template-grid">
        
        <!-- 1. Minimal -->
        <div class="pex-tpl-card tpl-minimal">
            <span class="pex-tpl-badge badge-general">General</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head" style="background:transparent; border-bottom:2px solid #e2e8f0; border-radius:0;"></div>
                    <div class="m-title"></div>
                    <div class="m-line"></div>
                    <div class="m-line"></div>
                    <div class="m-line short"></div>
                    <div class="m-btn" style="background:#cbd5e1;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '1. Standard Minimal', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A clean, highly-deliverable text layout. Best for personal messages, direct updates, and avoiding the Gmail Promotions tab.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=minimal' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 2. Newsletter -->
        <div class="pex-tpl-card tpl-newsletter">
            <span class="pex-tpl-badge badge-news">Newsletter</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-hero"></div>
                    <div class="m-title"></div>
                    <div class="m-line"></div>
                    <div class="m-line short"></div>
                    <div class="m-btn"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '2. Weekly Digest', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Features a large hero image placeholder, structured headings, and formatted paragraphs. Great for weekly roundups.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=newsletter' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 3. Promotional Sale -->
        <div class="pex-tpl-card tpl-promo">
            <span class="pex-tpl-badge badge-sales">Sales & Promo</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head" style="background:#ef4444;"></div>
                    <div class="m-title" style="margin: 0 auto 10px auto; text-align:center;"></div>
                    <div class="m-hero" style="background:#fef2f2; border:1px dashed #fca5a5;"></div>
                    <div class="m-line" style="margin: 10px auto; width:80%;"></div>
                    <div class="m-btn" style="background:#ef4444; width:80%; margin: 0 auto;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '3. Flash Sale Offer', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A high-converting layout designed for flash sales, discount codes, and product launches. Features a centered CTA.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=promo' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 4. Announcement -->
        <div class="pex-tpl-card tpl-announcement">
            <span class="pex-tpl-badge badge-general">Company</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-circle" style="margin: 10px auto;"></div>
                    <div class="m-title" style="margin: 0 auto 10px auto; width: 90%;"></div>
                    <div class="m-line" style="margin: 0 auto 6px auto; width:80%;"></div>
                    <div class="m-line" style="margin: 0 auto 12px auto; width:60%;"></div>
                    <div class="m-btn" style="margin: 0 auto;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '4. Big Announcement', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A beautifully centered, focused design. Perfect for announcing new features, important company news, or milestones.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=announcement' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 5. E-commerce Showcase -->
        <div class="pex-tpl-card tpl-ecommerce">
            <span class="pex-tpl-badge badge-sales">E-Commerce</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title"></div>
                    <div class="m-grid">
                        <div class="m-grid-box" style="height:35px;"></div>
                        <div class="m-grid-box" style="height:35px;"></div>
                    </div>
                    <div class="m-grid">
                        <div class="m-grid-box" style="height:35px;"></div>
                        <div class="m-grid-box" style="height:35px;"></div>
                    </div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '5. Product Showcase', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Display multiple products or services in a beautiful 2-column grid layout. Perfect for online stores.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=ecommerce' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 6. Webinar / Event -->
        <div class="pex-tpl-card tpl-event">
            <span class="pex-tpl-badge badge-event">Events</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-hero" style="height: 30px;"></div>
                    <div class="m-title"></div>
                    <div class="m-grid">
                        <div class="m-grid-box" style="flex:0.3; background:#10b981;"></div>
                        <div class="m-grid-box" style="flex:0.7; background:transparent;">
                            <div class="m-line" style="margin-top:5px;"></div>
                            <div class="m-line short"></div>
                        </div>
                    </div>
                    <div class="m-btn"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '6. Webinar Invitation', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Includes a dedicated date/time block to highlight an upcoming webinar, live stream, or physical event.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=webinar' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 7. Welcome Email -->
        <div class="pex-tpl-card tpl-welcome">
            <span class="pex-tpl-badge badge-general">Onboarding</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title" style="height: 12px; margin-bottom: 10px;"></div>
                    <div class="m-line"></div>
                    <div class="m-line"></div>
                    <div class="m-line short"></div>
                    <div class="m-grid" style="margin-top:10px;">
                        <div class="m-grid-box" style="height:16px; border-radius:20px; background:#cbd5e1;"></div>
                        <div class="m-grid-box" style="height:16px; border-radius:20px; background:#cbd5e1;"></div>
                    </div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '7. Welcome & Onboarding', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A warm, text-heavy introduction for new subscribers or customers, featuring helpful quick-link buttons.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=welcome' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 8. Urgent Alert -->
        <div class="pex-tpl-card tpl-alert">
            <span class="pex-tpl-badge badge-alert">Important</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head" style="background:#f59e0b;"></div>
                    <div class="m-title" style="width:50%; margin: 0 auto 10px auto; background:#d97706;"></div>
                    <div class="m-line"></div>
                    <div class="m-line short"></div>
                    <div class="m-hero" style="background:#fef3c7; border: 1px solid #f59e0b; margin-top:10px; height: 20px;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '8. Urgent Notice / Alert', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Designed for terms of service updates, security notices, or system downtime alerts. Commands attention.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=alert' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 9. Feedback / Survey -->
        <div class="pex-tpl-card tpl-feedback">
            <span class="pex-tpl-badge badge-general">Survey</span>
            <div class="pex-tpl-preview">
                <div class="m-email" style="align-items:center;">
                    <div class="m-head" style="width:100%;"></div>
                    <div class="m-title" style="margin-top:10px;"></div>
                    <div class="m-grid" style="gap:4px; margin: 15px 0;">
                        <div class="m-circle" style="width:15px; height:15px; background:#f59e0b; margin:0;"></div>
                        <div class="m-circle" style="width:15px; height:15px; background:#f59e0b; margin:0;"></div>
                        <div class="m-circle" style="width:15px; height:15px; background:#f59e0b; margin:0;"></div>
                        <div class="m-circle" style="width:15px; height:15px; background:#f59e0b; margin:0;"></div>
                        <div class="m-circle" style="width:15px; height:15px; background:#e2e8f0; margin:0;"></div>
                    </div>
                    <div class="m-btn" style="width:80%;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '9. Customer Feedback', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Ask for reviews, testimonials, or survey responses. Includes a star-rating visual mockup to increase clicks.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=feedback' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 10. Software Update -->
        <div class="pex-tpl-card tpl-update">
            <span class="pex-tpl-badge badge-news">Product</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title" style="height:12px; background:#2563eb;"></div>
                    <div style="display:flex; align-items:center; margin-bottom:6px;"><div class="m-circle" style="width:6px;height:6px;margin:0 6px 0 0; background:#2563eb;"></div><div class="m-line" style="margin:0;"></div></div>
                    <div style="display:flex; align-items:center; margin-bottom:6px;"><div class="m-circle" style="width:6px;height:6px;margin:0 6px 0 0; background:#2563eb;"></div><div class="m-line" style="margin:0;"></div></div>
                    <div style="display:flex; align-items:center; margin-bottom:6px;"><div class="m-circle" style="width:6px;height:6px;margin:0 6px 0 0; background:#2563eb;"></div><div class="m-line" style="margin:0; width:60%;"></div></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '10. Release Notes', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Perfect for SaaS companies or developers announcing new features, bug fixes, or version updates.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=update' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 11. Holiday Greeting -->
        <div class="pex-tpl-card tpl-holiday">
            <span class="pex-tpl-badge badge-general">Seasonal</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head" style="background:#dc2626;"></div>
                    <div class="m-hero" style="background:#fef3c7; height:25px;"></div>
                    <div class="m-title" style="margin:0 auto 10px auto; background:#dc2626;"></div>
                    <div class="m-line" style="margin:0 auto 6px auto; width:80%;"></div>
                    <div class="m-line" style="margin:0 auto 6px auto; width:60%;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '11. Holiday Greeting', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A festive, warm layout. Send seasonal greetings or holiday promotions to your audience with ease.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=holiday' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 12. Article Digest -->
        <div class="pex-tpl-card tpl-digest">
            <span class="pex-tpl-badge badge-news">Content</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-grid" style="margin-bottom:8px;">
                        <div class="m-grid-box" style="flex:0.3; height:20px;"></div>
                        <div class="m-grid-box" style="flex:0.7; background:transparent;"><div class="m-line" style="margin:3px 0;"></div><div class="m-line short" style="margin:0;"></div></div>
                    </div>
                    <div class="m-grid" style="margin-bottom:8px;">
                        <div class="m-grid-box" style="flex:0.3; height:20px;"></div>
                        <div class="m-grid-box" style="flex:0.7; background:transparent;"><div class="m-line" style="margin:3px 0;"></div><div class="m-line short" style="margin:0;"></div></div>
                    </div>
                    <div class="m-btn" style="background:transparent; border:1px solid #10b981; margin:0 auto; width: 80%;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '12. Blog Post Digest', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Share multiple blog posts, news articles, or resources with small thumbnail images and excerpts.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=digest' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 13. Event Reminder -->
        <div class="pex-tpl-card tpl-reminder">
            <span class="pex-tpl-badge badge-event">Events</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-circle" style="width:30px; height:30px; background:#fef08a; border:2px solid #eab308; margin: 10px auto;"></div>
                    <div class="m-title" style="margin: 0 auto 10px auto; width: 60%;"></div>
                    <div class="m-btn" style="background:#0f172a; margin: 0 auto;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '13. Event Reminder', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A quick, friendly nudge to remind subscribers about a webinar or event starting soon.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=reminder' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 14. Questionnaire -->
        <div class="pex-tpl-card tpl-survey">
            <span class="pex-tpl-badge badge-general">Survey</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title"></div>
                    <div class="m-line"></div>
                    <div class="m-line"></div>
                    <div class="m-btn" style="background:#8b5cf6; width:90%; height:20px; margin:15px auto 0 auto;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '14. Need Your Help', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A highly personal, plain-text style email asking a direct question with a large call-to-action button.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=survey' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 15. Onboarding Step 2 -->
        <div class="pex-tpl-card tpl-onboarding">
            <span class="pex-tpl-badge badge-general">Onboarding</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title"></div>
                    <div style="display:flex; align-items:center; margin-bottom:8px;"><div class="m-grid-box" style="width:12px; height:12px; flex:none; margin-right:8px; border-radius:2px;"></div><div class="m-line" style="margin:0;"></div></div>
                    <div style="display:flex; align-items:center; margin-bottom:8px;"><div class="m-grid-box" style="width:12px; height:12px; flex:none; margin-right:8px; border-radius:2px;"></div><div class="m-line" style="margin:0;"></div></div>
                    <div class="m-line short" style="margin-top:10px; background:#10b981;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '15. Onboarding Step 2', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Follow up with users who created an account but haven\'t completed their setup checklist yet.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=onboarding' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 16. Secret Coupon -->
        <div class="pex-tpl-card tpl-coupon">
            <span class="pex-tpl-badge badge-sales">Sales & Promo</span>
            <div class="pex-tpl-preview">
                <div class="m-email" style="align-items:center;">
                    <div class="m-head" style="width:100%;"></div>
                    <div class="m-title" style="margin-top:10px;"></div>
                    <div style="border:2px dashed #cbd5e1; padding:8px; width:70%; text-align:center; margin:10px 0; border-radius:4px; font-weight:800; font-size:10px; color:#1e293b; background: #ffffff;">VIP2026</div>
                    <div class="m-line short"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '16. Secret Coupon', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Reward your most loyal subscribers with a dedicated, highlighted coupon code box to drive sales.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=coupon' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 17. Abandoned Cart -->
        <div class="pex-tpl-card tpl-cart">
            <span class="pex-tpl-badge badge-sales">E-Commerce</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title" style="margin-bottom:10px; width:80%;"></div>
                    <div class="m-grid" style="margin-bottom:8px;">
                        <div class="m-grid-box" style="flex:0.3; height:25px;"></div>
                        <div class="m-grid-box" style="flex:0.7; background:transparent;"><div class="m-line" style="margin:3px 0;"></div><div class="m-line short" style="margin:0;"></div></div>
                    </div>
                    <div class="m-btn" style="background:#f59e0b; width:100%; margin-top:10px;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '17. Abandoned Cart', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Remind users they left something behind. Features a product placeholder and a strong return to checkout button.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=cart' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 18. Thank You -->
        <div class="pex-tpl-card tpl-thanks">
            <span class="pex-tpl-badge badge-general">General</span>
            <div class="pex-tpl-preview">
                <div class="m-email" style="align-items:center;">
                    <div class="m-head" style="width:100%;"></div>
                    <div class="m-circle" style="width:30px; height:30px; background:#dcfce7; margin: 10px auto;"></div>
                    <div class="m-title" style="width:50%; background:#10b981;"></div>
                    <div class="m-line"></div>
                    <div class="m-line short"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '18. Thank You', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A beautiful confirmation email for after a purchase, sign-up, or form submission.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=thanks' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 19. VIP Invite -->
        <div class="pex-tpl-card tpl-vip">
            <span class="pex-tpl-badge badge-news">Company</span>
            <div class="pex-tpl-preview">
                <div class="m-email" style="background:#0f172a; border-color:#0f172a;">
                    <div class="m-title" style="margin: 15px auto 10px auto; text-align:center; background:#fde047;"></div>
                    <div class="m-line" style="background:#334155;"></div>
                    <div class="m-line" style="background:#334155;"></div>
                    <div class="m-btn" style="background:#fde047; border-radius:20px; width:80%; margin: 15px auto 0 auto;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '19. VIP Exclusive', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'A sleek, dark-mode focused email designed to make the recipient feel exclusive and highly valued.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=vip' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

        <!-- 20. Monthly Recap -->
        <div class="pex-tpl-card tpl-recap">
            <span class="pex-tpl-badge badge-news">Newsletter</span>
            <div class="pex-tpl-preview">
                <div class="m-email">
                    <div class="m-head"></div>
                    <div class="m-title"></div>
                    <div style="background:#f1f5f9; padding:8px; border-radius:4px; margin-bottom:5px;">
                        <div class="m-line" style="background:#94a3b8; margin-bottom: 4px;"></div>
                        <div class="m-line" style="background:#94a3b8;"></div>
                    </div>
                    <div class="m-line short" style="background:#10b981;"></div>
                </div>
            </div>
            <div class="pex-tpl-body">
                <h3><?php esc_html_e( '20. Monthly Recap', 'pexally-email-campaigns' ); ?></h3>
                <p><?php esc_html_e( 'Showcase your user\'s monthly analytics, achievements, or platform usage in a neat summary box.', 'pexally-email-campaigns' ); ?></p>
                <a href="<?php echo esc_url( admin_url( 'admin.php?page=pexemail-campaigns-add&tpl=recap' ) ); ?>" class="pex-btn-select">
                    <?php esc_html_e( 'Select Template', 'pexally-email-campaigns' ); ?>
                    <svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
                </a>
            </div>
        </div>

    </div>
</div>