{{define "content"}}
<style>
.forms-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 2em; 
}
.forms-title { 
    font-size: 1.5em; 
    font-weight: 600; 
}
.add-form-btn { 
    background: #1976d2; 
    color: #fff; 
    border: none; 
    border-radius: 6px; 
    padding: 0.7em 1.4em; 
    font-size: 1em; 
    font-weight: 500; 
    cursor: pointer; 
    transition: background 0.18s; 
}
.add-form-btn:hover { 
    background: #125ea2; 
}
.forms-table { 
    width: 100%; 
    border-collapse: collapse; 
    background: #fff; 
    border-radius: 10px; 
    box-shadow: 0 2px 12px rgba(24,30,42,0.06); 
    overflow: hidden; 
}
.forms-table th, .forms-table td { 
    padding: 1em; 
    text-align: left; 
}
.forms-table th { 
    background: #f4f6f8; 
    color: #181e2a; 
    font-weight: 600; 
}
.forms-table tr:not(:last-child) { 
    border-bottom: 1px solid #e3e8f0; 
}
.form-action-btn { 
    background: none; 
    border: none; 
    color: #1976d2; 
    font-size: 1em; 
    margin-right: 0.7em; 
    cursor: pointer; 
    transition: color 0.18s; 
}
.form-action-btn:last-child { 
    margin-right: 0; 
}
.form-action-btn:hover { 
    color: #d32f2f; 
}
.copy-btn:hover {
    color: #388e3c !important;
}
.delete-btn:hover {
    color: #d32f2f !important;
}
.success-message {
    background: #d4edda;
    color: #155724;
    padding: 1em;
    border-radius: 6px;
    border: 1px solid #c3e6cb;
    margin-bottom: 1.5em;
}
</style>

{{if .SuccessMsg}}
<div class="success-message">{{.SuccessMsg}}</div>
{{end}}
<div class="forms-header">
    <div class="forms-title">Your Forms</div>
    <button class="add-form-btn" onclick="window.location='/form?id=0'">+ Add Form</button>
</div>
<table class="forms-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Subject</th>
            <th>Created</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        {{range .Forms}}
        <tr>
            <td>{{.Name}}</td>
            <td>{{.Subject}}</td>
            <td>{{.CreatedAt}}</td>
            <td>
                <button class="form-action-btn" onclick="window.location='/form?id={{.ID}}'">Edit</button>
                <button class="form-action-btn copy-btn" onclick="copyForm({{.ID}})">Copy</button>
                <button class="form-action-btn delete-btn" onclick="deleteForm({{.ID}}, '{{.Name}}')">Delete</button>
            </td>
        </tr>
        {{else}}
        <tr><td colspan="4" style="text-align:center; color:#888;">No forms found. Click "Add Form" to create your first form.</td></tr>
        {{end}}
    </tbody>
</table>

<script>
async function copyForm(formId) {
    if (!confirm('Are you sure you want to copy this form?')) {
        return;
    }
    
    try {
        const response = await fetch('/copy-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ form_id: formId })
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Redirect to forms page with success message
            if (result.redirect) {
                window.location.href = result.redirect;
            } else {
                window.location.reload();
            }
        } else {
            alert('Failed to copy form: ' + (result.error || 'Unknown error'));
        }
    } catch (error) {
        alert('Network error: ' + error.message);
    }
}

async function deleteForm(formId, formName) {
    // Escape form name for safe display
    const safeName = formName.replace(/'/g, "\\'");
    
    if (!confirm(`Are you sure you want to delete the form "${safeName}"?\n\nThis action cannot be undone and will also delete all form submissions.`)) {
        return;
    }
    
    try {
        const response = await fetch('/delete-form', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ form_id: formId })
        });
        
        const result = await response.json();
        
        if (result.success) {
            // Redirect to forms page with success message
            if (result.redirect) {
                window.location.href = result.redirect;
            } else {
                window.location.reload();
            }
        } else {
            alert('Failed to delete form: ' + (result.error || 'Unknown error'));
        }
    } catch (error) {
        alert('Network error: ' + error.message);
    }
}
</script>
{{end}}