${template.description}

`; div.addEventListener('click', () => selectTemplate(template.id)); templateSelectionContainer.appendChild(div); }); }; const generateFinalResponse = () => { if (!selectedTemplate) return; let body = customMessageTextarea.value; const userName = document.getElementById('user-name').value || '[Your Name]'; const startDate = document.getElementById('start-date').value; const endDate = document.getElementById('end-date').value; body = body.replace(/\[Your Name\]/g, userName); body = body.replace(/\[Start Date\]/g, startDate ? new Date(startDate).toLocaleDateString() : '[Start Date]'); body = body.replace(/\[End Date\]/g, endDate ? new Date(endDate).toLocaleDateString() : '[End Date]'); finalEmailPreview.textContent = body; }; // --- LOGIC & EVENT HANDLERS --- const selectTemplate = (templateId) => { selectedTemplate = templates.find(t => t.id === templateId); if (!selectedTemplate) return; // Highlight selected template document.querySelectorAll('#template-selection > div').forEach(div => { if (div.dataset.templateId === templateId) { div.classList.add('border-blue-500', 'bg-blue-50', 'ring-2', 'ring-blue-300'); } else { div.classList.remove('border-blue-500', 'bg-blue-50', 'ring-2', 'ring-blue-300'); } }); customMessageTextarea.value = selectedTemplate.body; showTab(1); // Automatically move to the next tab }; const copyToClipboard = () => { const textToCopy = finalEmailPreview.textContent; // Using a temporary textarea to copy, which is more reliable than navigator.clipboard in some environments const tempTextarea = document.createElement('textarea'); tempTextarea.value = textToCopy; document.body.appendChild(tempTextarea); tempTextarea.select(); try { document.execCommand('copy'); copyFeedback.classList.remove('hidden'); setTimeout(() => copyFeedback.classList.add('hidden'), 2000); } catch (err) { console.error('Failed to copy text: ', err); } document.body.removeChild(tempTextarea); }; const downloadPDF = () => { const { jsPDF } = window.jspdf; const doc = new jsPDF(); const text = finalEmailPreview.textContent; doc.setFontSize(16); doc.text("Generated Email Auto-Response", 105, 20, { align: 'center' }); doc.setFontSize(11); // The splitTextToSize function handles wrapping long lines of text const splitText = doc.splitTextToSize(text, 180); doc.text(splitText, 15, 35); doc.save("auto-response.pdf"); }; // --- TAB NAVIGATION --- window.showTab = (tabIndex) => { if (tabIndex < 0 || tabIndex >= tabs.length) return; // Logic to prevent skipping tabs if (tabIndex > 0 && !selectedTemplate) { alert("Please select a template first."); return; } if (tabIndex === 2) { generateFinalResponse(); } currentTab = tabIndex; tabs.forEach((tab, index) => { tab.classList.toggle('tab-active', index === tabIndex); }); tabContents.forEach((content, index) => { content.classList.toggle('hidden', index !== tabIndex); }); updateNavButtons(); }; const updateNavButtons = () => { prevButton.disabled = currentTab === 0; nextButton.disabled = currentTab === tabs.length - 1; prevButton.classList.toggle('opacity-50', prevButton.disabled); nextButton.classList.toggle('opacity-50', nextButton.disabled); }; // --- INITIALIZATION --- prevButton.addEventListener('click', () => showTab(currentTab - 1)); nextButton.addEventListener('click', () => showTab(currentTab + 1)); copyButton.addEventListener('click', copyToClipboard); pdfDownloadButton.addEventListener('click', downloadPDF); renderTemplates(); showTab(0); });