document.addEventListener('DOMContentLoaded', function() {
    const form = document.getElementById('scrapeForm');
    const loadingIndicator = document.getElementById('loadingIndicator');
    const results = document.getElementById('results');
    const resultContent = document.getElementById('resultContent');

    form.addEventListener('submit', async function(e) {
        e.preventDefault();
        
        const url = document.getElementById('url').value;
        const promptTemplate = document.getElementById('promptTemplate').value;
        
        loadingIndicator.classList.remove('hidden');
        results.classList.add('hidden');

        try {
            const response = await fetch('/api/scrape', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({ 
                    url: url,
                    prompt_template: promptTemplate
                })
            });

            const data = await response.json();
            
            if (data.success) {
                resultContent.textContent = data.result;
            } else {
                resultContent.textContent = 'Failed to analyze content: ' + data.detail;
            }
            
            results.classList.remove('hidden');
        } catch (error) {
            console.error('Error:', error);
            resultContent.textContent = 'An error occurred while processing your request.';
            results.classList.remove('hidden');
        } finally {
            loadingIndicator.classList.add('hidden');
        }
    });
});