{{ define "content" }}
<div class="card">
    <div class="card-header">
        <h1 class="card-title">Email Settings</h1>
        <p class="card-subtitle">Configure your IMAP email account</p>
    </div>
    
    <form method="POST" action="/settings">
        <h3 class="mb-3">IMAP Configuration</h3>
        
        <div class="form-group">
            <label for="imap_host" class="form-label">IMAP Host</label>
            <input type="text" id="imap_host" name="imap_host" class="form-input" 
                   value="{{ .Settings.IMAPHost }}" placeholder="imap.example.com" required>
        </div>
        
        <div class="form-group">
            <label for="imap_port" class="form-label">IMAP Port</label>
            <input type="number" id="imap_port" name="imap_port" class="form-input" 
                   value="{{ .Settings.IMAPPort }}" placeholder="993" required>
        </div>
        
        <div class="form-group">
            <label for="imap_user" class="form-label">Email Address</label>
            <input type="email" id="imap_user" name="imap_user" class="form-input" 
                   value="{{ .Settings.IMAPUser }}" placeholder="you@example.com" required>
        </div>
        
        <div class="form-group">
            <label for="imap_pass" class="form-label">Password / App Password</label>
            <input type="password" id="imap_pass" name="imap_pass" class="form-input" 
                   placeholder="Leave blank to keep current" autocomplete="off">
            <p class="text-light mt-1">For Gmail, use an App Password. Your password is encrypted before storage. Leave blank to keep your existing password.</p>
        </div>
        
        <div class="form-group">
            <label class="form-label">
                <input type="checkbox" name="imap_tls" {{ if .Settings.IMAPTLS }}checked{{ end }}>
                Use TLS (recommended)
            </label>
        </div>
        
        <h3 class="mb-3">Processing Settings</h3>
        
        <div class="form-group">
            <label for="batch_size" class="form-label">Batch Size</label>
            <input type="number" id="batch_size" name="batch_size" class="form-input" 
                   value="{{ .Settings.BatchSize }}" placeholder="10" min="1" max="100" required>
            <p class="text-light mt-1">Number of emails to process in each batch</p>
        </div>
        
        <div class="form-group">
            <label for="poll_interval" class="form-label">Poll Interval (minutes)</label>
            <input type="number" id="poll_interval" name="poll_interval" class="form-input" 
                   value="{{ .Settings.PollInterval }}" placeholder="5" min="1" max="60" required>
            <p class="text-light mt-1">How often to check for new emails</p>
        </div>
        
        <div class="form-group">
            <label class="form-label">
                <input type="checkbox" name="auto_start" {{ if .Settings.AutoStart }}checked{{ end }}>
                Start processing automatically
            </label>
        </div>
        
        <div style="display: flex; gap: var(--spacing-md);">
            <button type="submit" class="btn btn-primary">Save Settings</button>
            <button type="button" class="btn btn-secondary" onclick="testConnection()">Test Connection</button>
            <a href="/dashboard" class="btn btn-secondary">Cancel</a>
        </div>
        
        {{ if .Error }}
        <div class="alert alert-error mt-3">
            {{ .Error }}
        </div>
        {{ end }}
        
        {{ if .Success }}
        <div class="alert alert-success mt-3">
            {{ .Success }}
        </div>
        {{ end }}
    </form>
</div>

<script>
function testConnection() {
    const form = document.querySelector('form');
    const formData = new FormData(form);
    
    fetch('/test-connection', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('✅ Connection successful!');
        } else {
            alert('❌ Connection failed: ' + data.error);
        }
    })
    .catch(error => {
        alert('❌ Error testing connection: ' + error.message);
    });
}
</script>
{{ end }}

{{ template "base" . }}