{{define "content"}}
<style>
.form-edit-container { max-width: 500px; margin: 2em auto; background: #fff; border-radius: 10px; box-shadow: 0 2px 12px rgba(24,30,42,0.06); padding: 2em; }
.form-edit-title { font-size: 1.4em; font-weight: 600; margin-bottom: 1.2em; }
.form-group { margin-bottom: 1.3em; }
.form-label { display: block; margin-bottom: 0.5em; font-weight: 500; color: #181e2a; }
.form-input, .form-textarea { width: 100%; padding: 0.7em; border: 1px solid #cfd8dc; border-radius: 5px; font-size: 1em; background: #f9fafb; color: #222; transition: border-color 0.2s; }
.form-input:focus, .form-textarea:focus { border-color: #1976d2; outline: none; }
.form-textarea { min-height: 90px; resize: vertical; }
.form-edit-btn { background: #1976d2; color: #fff; border: none; border-radius: 6px; padding: 0.8em 1.6em; font-size: 1em; font-weight: 500; cursor: pointer; transition: background 0.18s; }
.form-edit-btn:hover { background: #125ea2; }
.form-cancel-link { margin-left: 1.2em; color: #1976d2; text-decoration: none; font-weight: 500; }
.form-cancel-link:hover { text-decoration: underline; }
.error-message, .success-message { margin-bottom: 1em; }
        /* Modernized field editor styles */
        .fields-section { margin-top: 1em; }
        .field-row {
            display: flex;
            gap: 1em;
            align-items: flex-start;
            margin-bottom: 1.1em;
            background: #f5f7fa;
            border-radius: 10px;
            box-shadow: 0 1px 4px rgba(24,30,42,0.04);
            padding: 1.1em 1em 1em 1em;
            position: relative;
            transition: box-shadow 0.18s;
            width: 100%;
            box-sizing: border-box;
        }

        .field-row > div {
            width: 100%;
            box-sizing: border-box;
        }
        .field-row:hover {
            box-shadow: 0 2px 12px rgba(24,30,42,0.10);
        }
        .field-row input[type="text"], .field-row select {
            border: 1px solid #cfd8dc;
            border-radius: 6px;
            padding: 0.5em 0.8em;
            font-size: 1em;
            background: #fff;
            transition: border-color 0.18s;
        }
        .field-row input[type="text"]:focus, .field-row select:focus {
            border-color: #1976d2;
            outline: none;
        }
        .field-row input[type="checkbox"] {
            accent-color: #1976d2;
            margin-left: 0.5em;
            margin-right: 0.2em;
        }
        .field-row .delete-btn {
            background: #fff;
            color: #d32f2f;
            border: 1px solid #d32f2f;
            border-radius: 6px;
            padding: 0.4em 1em;
            font-size: 0.98em;
            font-weight: 500;
            cursor: pointer;
            margin-left: 0.5em;
            transition: background 0.18s, color 0.18s, border-color 0.18s;
        }
        .field-row .delete-btn:hover {
            background: #d32f2f;
            color: #fff;
            border-color: #d32f2f;
        }
        .add-field-btn-modern {
            background: linear-gradient(90deg, #232a3a 60%, #181e2a 100%);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: 0.8em 1.6em;
            font-size: 1.08em;
            font-weight: 600;
            margin-top: 1.2em;
            margin-bottom: 0.5em;
            cursor: pointer;
            box-shadow: 0 2px 8px rgba(35,42,58,0.08);
            transition: background 0.18s, box-shadow 0.18s;
        }
        .add-field-btn-modern:hover {
            background: linear-gradient(90deg, #1a212c 60%, #141a24 100%);
            box-shadow: 0 4px 16px rgba(35,42,58,0.13);
        }
        .field-row.fixed {
            background: #e3eaf2;
            border: 1px solid #bfc9da;
            opacity: 0.95;
            cursor: not-allowed;
        }
        .field-row.fixed input,
        .field-row.fixed select,
        .field-row.fixed .delete-btn {
            background: #e3eaf2 !important;
            color: #888 !important;
            border: none !important;
            pointer-events: none;
        }
        .field-row-flex {
            display: flex;
            gap: 1em;
            align-items: flex-start;
            flex-wrap: wrap;
        }
        .options-list {
            display: flex;
            flex-direction: column;
            gap: 0.5em;
            margin-top: 0.5em;
            margin-bottom: 0.5em;
        }
        .option-row {
            display: flex;
            gap: 0.5em;
            align-items: center;
        }
        .add-option-btn {
            background: linear-gradient(90deg, #232a3a 60%, #181e2a 100%);
            color: #fff;
            border: none;
            border-radius: 6px;
            padding: 0.3em 1em;
            font-size: 0.98em;
            font-weight: 500;
            cursor: pointer;
            margin-top: 0.2em;
            margin-bottom: 0.2em;
            transition: background 0.18s;
        }
        .add-option-btn:hover {
            background: linear-gradient(90deg, #1a212c 60%, #141a24 100%);
        }
        
        /* Drag and drop styles */
        .field-row:not(.fixed) {
            cursor: move;
        }
        .field-row.dragging {
            opacity: 0.5;
            transform: rotate(2deg);
        }
        .field-row.drag-over {
            border-top: 3px solid #1976d2;
        }
        .drag-handle {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2zm-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>') no-repeat center;
            background-size: 16px;
            cursor: move;
            margin-right: 8px;
            vertical-align: middle;
            flex-shrink: 0;
        }
        .field-row.fixed .drag-handle {
            opacity: 0.3;
            cursor: not-allowed;
        }
</style>

<div class="form-edit-container">
                <div class="form-edit-title">{{if .IsEdit}}Edit Form{{else}}Add Form{{end}}</div>
                {{if .Error}}
                <div class="error-message">{{.Error}}</div>
                {{end}}
                {{if .Success}}
                <div class="success-message">{{.Success}}</div>
                {{end}}
                <form method="POST" action="/form?id={{.ID}}" id="formEditorForm">
                    <input type="hidden" name="csrf_token" value="{{.CSRFToken}}">
                    <div class="form-group">
                        <label class="form-label" for="formName">Form Name</label>
                        <input class="form-input" type="text" id="formName" name="name" value="{{.Name}}" required maxlength="128">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="formSubject">Subject</label>
                        <input class="form-input" type="text" id="formSubject" name="subject" value="{{.Subject}}" required maxlength="128">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="formHeading">Heading <span style="font-weight:400;color:#888;">(optional)</span></label>
                        <input class="form-input" type="text" id="formHeading" name="heading" value="{{.Heading}}" maxlength="255" placeholder="Form heading (optional)">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="formMessage">Message <span style="font-weight:400;color:#888;">(optional)</span></label>
                        <textarea class="form-textarea" id="formMessage" name="message" maxlength="1000" placeholder="Form message (optional)">{{.Message}}</textarea>
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="formRecipients">Recipients <span style="font-weight:400;color:#888;">(optional, comma-separated)</span></label>
                        <input class="form-input" type="text" id="formRecipients" name="recipients" value="{{.Recipients}}" maxlength="1000" placeholder="e.g. you@example.com, another@example.com">
                    </div>
                    <div class="form-group">
                        <label class="form-label" for="smtpSelect">SMTP Server</label>
                        <select class="form-input" id="smtpSelect" name="smtp_id" required>
                            <option value="">-- Select SMTP Server --</option>
                            {{range .SmtpServers}}
                            <option value="{{.id}}" {{if eq $.SmtpID .id}}selected{{end}}>{{.label}}</option>
                            {{end}}
                        </select>
                    </div>
                    <div class="form-group fields-section">
                        <label class="form-label">Fields</label>
                        <div id="fieldsList"></div>
                        <button type="button" class="add-field-btn-modern" id="addFieldBtn">+ Add Field</button>
                    </div>
                    <input type="hidden" name="fields_json" id="fieldsJsonInput">
                    <button class="form-edit-btn" type="submit">{{if .IsEdit}}Save Form{{else}}Add Form{{end}}</button>
                    <a href="/forms" class="form-cancel-link">Cancel</a>
                </form>
            </div>

<script>

    // Field types
    const FIELD_TYPES = [
        { value: 'text', label: 'Text' },
        { value: 'textarea', label: 'Textarea' },
        { value: 'select', label: 'Dropdown Select' },
        { value: 'radio', label: 'Radio' },
        { value: 'phone', label: 'Phone' }
    ];

    // Always-required fields
    const FIXED_FIELDS = [
        { label: 'Name', type: 'name', required: true, options: [], default_value: '', fixed: true },
        { label: 'Email', type: 'email', required: true, options: [], default_value: '', fixed: true }
    ];

    // Initial fields (from backend if editing)
    let fields = [];
    {{if .FieldsJson}}
    fields = {{.FieldsJson}};
    {{end}}

    function ensureFixedFields() {
        // Remove any user-added name/email fields
        fields = fields.filter(f => !['name','email'].includes(f.type));
        // Add fixed fields at the top
        fields = [ ...FIXED_FIELDS, ...fields ];
    }

    // Drag and drop functionality
    let draggedElement = null;
    let draggedIndex = -1;

    function handleDragStart(e) {
        draggedElement = e.target;
        draggedIndex = parseInt(e.target.dataset.fieldIndex);
        e.target.classList.add('dragging');
        e.dataTransfer.effectAllowed = 'move';
        e.dataTransfer.setData('text/html', e.target.outerHTML);
    }

    function handleDragOver(e) {
        if (e.preventDefault) {
            e.preventDefault();
        }
        e.dataTransfer.dropEffect = 'move';
        
        // Add visual feedback
        const targetElement = e.target.closest('.field-row');
        if (targetElement && targetElement !== draggedElement && !targetElement.classList.contains('fixed')) {
            document.querySelectorAll('.field-row').forEach(el => el.classList.remove('drag-over'));
            targetElement.classList.add('drag-over');
        }
        return false;
    }

    function handleDrop(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        }

        const targetElement = e.target.closest('.field-row');
        if (targetElement && targetElement !== draggedElement && !targetElement.classList.contains('fixed')) {
            const targetIndex = parseInt(targetElement.dataset.fieldIndex);
            
            // Only allow reordering of non-fixed fields (index >= 2)
            if (draggedIndex >= 2 && targetIndex >= 2) {
                // Remove dragged field from array
                const draggedField = fields.splice(draggedIndex, 1)[0];
                
                // Insert at new position
                const newTargetIndex = targetIndex > draggedIndex ? targetIndex - 1 : targetIndex;
                fields.splice(newTargetIndex, 0, draggedField);
                
                // Re-render fields
                renderFields();
            }
        }

        // Clean up
        document.querySelectorAll('.field-row').forEach(el => el.classList.remove('drag-over'));
        return false;
    }

    function handleDragEnd(e) {
        e.target.classList.remove('dragging');
        document.querySelectorAll('.field-row').forEach(el => el.classList.remove('drag-over'));
        draggedElement = null;
        draggedIndex = -1;
    }

    function renderFields() {
        ensureFixedFields();
        const list = document.getElementById('fieldsList');
        list.innerHTML = '';
        fields.forEach((field, idx) => {
            const isFixed = field.fixed;
            const div = document.createElement('div');
            div.className = 'field-row' + (isFixed ? ' fixed' : '');
            div.dataset.fieldIndex = idx;
            
            // Add drag and drop attributes for non-fixed fields
            if (!isFixed) {
                div.draggable = true;
                div.addEventListener('dragstart', handleDragStart);
                div.addEventListener('dragover', handleDragOver);
                div.addEventListener('drop', handleDrop);
                div.addEventListener('dragend', handleDragEnd);
            }
            
            let optionsHtml = '';
            if ((field.type === 'select' || field.type === 'radio') && !isFixed) {
                if (!Array.isArray(field.options)) {
                    field.options = field.options ? field.options.split(',').map(o => o.trim()) : [];
                }
                // Initialize default_value if not set
                if (field.default_value === undefined) {
                    field.default_value = '';
                }
                optionsHtml = `<div class='options-list' id='optionsList${idx}'>` +
                    field.options.map((opt, oidx) => `
                        <div class='option-row'>
                            <input type='text' value="${opt.replace(/"/g, '&quot;')}" placeholder='Option' style='flex:2;' onchange='fields[${idx}].options[${oidx}]=this.value'>
                            <label style='display:flex;align-items:center;gap:0.3em;margin-left:0.5em;font-size:0.9em;'>
                                <input type='radio' name='default_${idx}' value='${oidx}' ${field.default_value === opt ? 'checked' : ''} onchange='fields[${idx}].default_value=fields[${idx}].options[${oidx}]' style='margin:0;'>
                                Default
                            </label>
                            <button type='button' class='delete-btn' style='padding:0.2em 0.8em;' onclick='fields[${idx}].options.splice(${oidx},1);if(fields[${idx}].default_value===fields[${idx}].options[${oidx}])fields[${idx}].default_value="";renderFields()'>Delete</button>
                        </div>
                    `).join('') +
                    `</div><button type='button' class='add-option-btn' onclick='fields[${idx}].options.push("");renderFields()'>+ Add Option</button>`;
            }
            div.innerHTML = `
                <div style='margin-bottom:0.7em;'>
                    <div style='display:flex;gap:0.7em;margin-bottom:0.5em;align-items:center;'>
                        <span class='drag-handle'></span>
                        <input type="text" placeholder="Label" value="${field.label || ''}" style="flex:2;min-width:120px;" onchange="if(!${isFixed})fields[${idx}].label=this.value" ${isFixed?'readonly':''}>
                        <select style="flex:1;min-width:120px;" ${isFixed?'disabled':''} onchange="fields[${idx}].type=this.value;renderFields()">
                            ${isFixed
                                ? `<option value="${field.type}" selected>${field.label}</option>`
                                : FIELD_TYPES.map(t => `<option value="${t.value}" ${field.type===t.value?'selected':''}>${t.label}</option>`).join('')
                            }
                        </select>
                    </div>
                    <div style='display:flex;align-items:center;gap:0.5em;margin-bottom:0.5em;'>
                        <input type="checkbox" ${field.required?'checked':''} ${isFixed?'disabled':''} onchange="fields[${idx}].required=this.checked">
                        <span style='font-size:0.98em;'>Required</span>
                    </div>
                    ${optionsHtml ? `<div style='margin-bottom:0.5em;'>${optionsHtml}</div>` : ''}
                    ${isFixed ? '' : `<button type="button" class="delete-btn" style="width:100%;margin-top:0.2em;" onclick="fields.splice(${idx},1);renderFields()">Delete</button>`}
                </div>
            `;
            list.appendChild(div);
        });
        // Before saving, ensure options arrays are filtered but not joined to string
        const fieldsForSave = fields.map(f => {
            let options = f.options;
            if ((f.type === 'select' || f.type === 'radio') && Array.isArray(options)) {
                options = options.filter(opt => opt.trim() !== '');
                // Clear default_value if the option was removed
                if (f.default_value && !options.includes(f.default_value)) {
                    f.default_value = '';
                }
            }
            return { ...f, options };
        });
        document.getElementById('fieldsJsonInput').value = JSON.stringify(fieldsForSave);
    }

    document.getElementById('addFieldBtn').onclick = function() {
        fields.push({label:'',type:'text',required:false,options:[],default_value:''});
        renderFields();
    };
    renderFields();

    document.getElementById('formEditorForm').onsubmit = async function(e) {
        e.preventDefault();
        const form = document.getElementById('formEditorForm');
        ensureFixedFields();
        const fieldsForSave = fields.map(f => {
            let options = f.options;
            if ((f.type === 'select' || f.type === 'radio') && Array.isArray(options)) {
                options = options.filter(opt => opt.trim() !== '');
                // Clear default_value if the option was removed
                if (f.default_value && !options.includes(f.default_value)) {
                    f.default_value = '';
                }
            }
            return { ...f, options };
        });
        const payload = {
            csrf_token: document.querySelector('input[name="csrf_token"]').value,
            name: document.getElementById('formName').value,
            subject: document.getElementById('formSubject').value,
            heading: document.getElementById('formHeading').value,
            message: document.getElementById('formMessage').value,
            recipients: document.getElementById('formRecipients').value,
            smtp_id: parseInt(document.getElementById('smtpSelect').value, 10),
            fields_json: JSON.stringify(fieldsForSave)
        };
        console.log('Submitting JSON:', payload);
        try {
            const response = await fetch(form.action, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Requested-With': 'XMLHttpRequest'
                },
                body: JSON.stringify(payload)
            });
            const result = await response.json();
            console.log('Server JSON response:', result);
            if (result.success) {
                if (result.redirect) {
                    window.location.href = result.redirect;
                } else {
                    window.location.href = '/forms';
                }
            }
            // Optionally, display result in the UI
        } catch (err) {
            console.error('AJAX submit error:', err);
        }
    };
</script>
{{end}}