<% currentPage = 'templates' %>

<!-- Page Header - Compact & Mobile Friendly -->
<div class="d-flex align-items-center gap-3 mb-4">
    <a href="/templates" class="btn btn-light btn-sm" style="min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center;">
        <i class="fas fa-arrow-left"></i>
    </a>
    <div class="flex-grow-1">
        <h4 class="mb-0 fw-bold" style="font-size: clamp(1rem, 4vw, 1.25rem);"><%= mode === 'create' ? 'New Template' : 'Edit Template' %></h4>
        <small class="text-muted d-none d-sm-inline">Design your message template</small>
    </div>
</div>

<form id="templateEditorForm" enctype="multipart/form-data">
    <input type="hidden" id="templateId" value="<%= template ? template.id : '' %>">
    
    <div class="row g-3">
        <!-- Editor Column -->
        <div class="col-lg-7">
            <div class="card shadow-sm">
                <div class="card-body p-3">
                    <!-- Template Name -->
                    <div class="mb-3">
                        <label class="form-label-compact">
                            <i class="fas fa-tag"></i> Name
                        </label>
                        <input type="text" class="form-control-compact" id="templateName" 
                               value="<%= template ? template.name : '' %>" required 
                               placeholder="e.g., Welcome Message">
                    </div>

                    <!-- Template Type -->
                    <div class="mb-3">
                        <label class="form-label-compact">
                            <i class="fas fa-list"></i> Template Type
                        </label>
                        <select class="form-control-compact" id="templateType">
                            <optgroup label="Basic Messages">
                                <option value="text">📝 Text Message</option>
                                <option value="media">📎 Media (Image/Video/Audio/Document)</option>
                            </optgroup>
                            <optgroup label="Special Messages">
                                <option value="sticker">🎨 Sticker</option>
                                <option value="location">📍 Location</option>
                                <option value="contact">👤 Contact (vCard)</option>
                                <option value="poll">📊 Poll</option>
                            </optgroup>
                            <optgroup label="Privacy">
                                <option value="viewOnceImage">👁️ View Once Image</option>
                                <option value="viewOnceVideo">👁️ View Once Video</option>
                                <option value="viewOnceAudio">👁️ View Once Audio</option>
                            </optgroup>
                        </select>
                    </div>

                    <!-- Dynamic Fields Container -->
                    <div id="dynamicTemplateFields"></div>
                    
                    <!-- Action Buttons (Mobile) -->
                    <div class="d-lg-none mt-4">
                        <button type="submit" class="btn btn-success w-100 btn-lg" style="min-height: 48px;">
                            <i class="fas fa-save me-2"></i><%= mode === 'create' ? 'Create Template' : 'Update Template' %>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Preview Column -->
        <div class="col-lg-5" id="previewColumn">
            <div class="preview-sticky">
                <!-- WhatsApp Preview -->
                <div class="card shadow-sm mb-3">
                    <div class="card-header bg-success text-white py-2 d-flex justify-content-between align-items-center">
                        <small class="fw-semibold"><i class="fab fa-whatsapp me-2"></i>Preview</small>
                        <button type="button" class="btn btn-sm btn-light d-lg-none" id="hidePreviewBtn" style="padding: 0.25rem 0.5rem;">
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                    <div class="whatsapp-preview-compact">
                        <div class="wa-message-bubble">
                            <div id="previewContent" class="wa-message-text">
                                <em class="text-muted">Your message here...</em>
                            </div>
                            <div class="wa-message-time">
                                <span id="currentTime"></span>
                                <i class="fas fa-check-double"></i>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Action Buttons (Desktop Only) -->
                <div class="d-none d-lg-flex gap-2">
                    <a href="/templates" class="btn btn-light flex-grow-1">
                        <i class="fas fa-times me-1"></i>Cancel
                    </a>
                    <button type="submit" class="btn btn-success flex-grow-1">
                        <i class="fas fa-save me-1"></i><%= mode === 'create' ? 'Create' : 'Update' %>
                    </button>
                </div>
                
                <!-- Back Button (Mobile Only) -->
                <div class="d-lg-none">
                    <button type="button" class="btn btn-outline-secondary w-100" id="backToFormBtn" style="min-height: 48px;">
                        <i class="fas fa-arrow-left me-1"></i>Back to Form
                    </button>
                </div>
            </div>
        </div>
    </div>
</form>

<!-- Mobile Preview Toggle Button (FAB) -->
<button type="button" class="btn btn-success btn-fab d-lg-none" id="fabPreviewBtn">
    <i class="fab fa-whatsapp"></i>
</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
<script src="/js/template-editor.js"></script>
<script>
    // Mobile preview toggle
    document.addEventListener('DOMContentLoaded', function() {
        const fabBtn = document.getElementById('fabPreviewBtn');
        const hidePreviewBtn = document.getElementById('hidePreviewBtn');
        const backToFormBtn = document.getElementById('backToFormBtn');
        const previewCol = document.getElementById('previewColumn');
        
        if (previewCol) {
            let isPreviewVisible = window.innerWidth >= 992;
            
            // Initially hide preview on mobile
            if (window.innerWidth < 992) {
                previewCol.style.display = 'none';
            }
            
            function showPreview() {
                isPreviewVisible = true;
                previewCol.style.display = 'block';
                if (fabBtn) fabBtn.style.display = 'none';
                setTimeout(() => previewCol.scrollIntoView({ behavior: 'smooth', block: 'start' }), 100);
            }
            
            function hidePreview() {
                isPreviewVisible = false;
                previewCol.style.display = 'none';
                if (fabBtn && window.innerWidth < 992) fabBtn.style.display = 'flex';
                window.scrollTo({ top: 0, behavior: 'smooth' });
            }
            
            // FAB button
            if (fabBtn) fabBtn.addEventListener('click', showPreview);
            
            // Hide button in preview header
            if (hidePreviewBtn) hidePreviewBtn.addEventListener('click', hidePreview);
            
            // Back to form button
            if (backToFormBtn) backToFormBtn.addEventListener('click', hidePreview);
            
            // Handle resize
            window.addEventListener('resize', function() {
                if (window.innerWidth >= 992) {
                    previewCol.style.display = 'block';
                    if (fabBtn) fabBtn.style.display = 'none';
                    isPreviewVisible = true;
                } else if (!isPreviewVisible) {
                    previewCol.style.display = 'none';
                    if (fabBtn) fabBtn.style.display = 'flex';
                }
            });
        }
    });
</script>
