components/template-card.js

class CustomTemplateCard extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    connectedCallback() {
        const name = this.getAttribute('name') || '';
        const status = this.getAttribute('status') || '';
        const category = this.getAttribute('category') || '';
        const language = this.getAttribute('language') || '';

        this.shadowRoot.innerHTML = `
            <style>
                .card {
                    transition: all 0.2s ease;
                    cursor: pointer;
                }
                .card:hover {
                    transform: translateY(-2px);
                    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
                }
                .badge-approved {
                    background-color: #10B981;
                    color: white;
                }
                .badge-pending {
                    background-color: #F59E0B;
                    color: white;
                }
                .badge-rejected {
                    background-color: #EF4444;
                    color: white;
                }
                .badge-transactional {
                    background-color: #8B5CF6;
                    color: white;
                }
                .badge-marketing {
                    background-color: #F97316;
                    color: white;
                }
                .badge-seasonal {
                    background-color: #3B82F6;
                    color: white;
                }
            </style>
            <div class="card bg-white p-4 rounded-lg border border-gray-200">
                <div class="flex justify-between items-start">
                    <div>
                        <h3 class="font-medium text-gray-800">${name.replace(/_/g, ' ')}</h3>
                        <div class="flex items-center mt-2 space-x-2">
                            <span class="text-xs px-2 py-1 rounded-full ${this.getCategoryClass(category)}">
                                ${this.getCategoryName(category)}
                            </span>
                            <span class="text-xs text-gray-500">${language}</span>
                        </div>
                    </div>
                    <span class="text-xs px-2 py-1 rounded-full ${this.getStatusClass(status)}">
                        ${this.getStatusName(status)}
                    </span>
                </div>
            </div>
        `;
    }

    getStatusClass(status) {
        switch(status) {
            case 'approved': return 'badge-approved';
            case 'pending': return 'badge-pending';
            case 'rejected': return 'badge-rejected';
            default: return 'bg-gray-100 text-gray-800';
        }
    }

    getStatusName(status) {
        switch(status) {
            case 'approved': return 'Approved';
            case 'pending': return 'Pending';
            case 'rejected': return 'Rejected';
            default: return status;
        }
    }

    getCategoryClass(category) {
        switch(category) {
            case 'transactional': return 'badge-transactional';
            case 'marketing': return 'badge-marketing';
            case 'seasonal': return 'badge-seasonal';
            default: return 'bg-gray-100 text-gray-800';
        }
    }

    getCategoryName(category) {
        switch(category) {
            case 'transactional': return 'Transactional';
            case 'marketing': return 'Marketing';
            case 'seasonal': return 'Seasonal';
            default: return category;
        }
    }
}

customElements.define('custom-template-card', CustomTemplateCard);