Congressional District Information by @almedia

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.
References

Find out more
formSpecifica a quale form appartiene un elemento.
formnovalidateImpedisce la convalida di un singolo elemento input
novalidateImpedisce la convalida dei campi con valori tipizzati di elemento input
idIdentifica univocamente un elemento HTML
<body>Tag primario di un documento HTML
<abbr>Inserisce abbreviazioni e acronimi
Users

Log in to search for users
Explore

Find inspiration
Review of Functions I
HTML
CSS
terminal console
feedback
add_box New
cookie Policy

Privacy information and cookies
We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy
Click on “Agree” to confirm.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Congressional District Information Hub</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: '#5D5CDE',
                        democratic: '#0E46E9',
                        republican: '#E91D0E',
                    }
                }
            }
        }
    </script>
    <style>
        .card-header {
            position: relative;
            overflow: hidden;
        }
        
        .card-header::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            height: 3px;
            width: 100%;
            background: #5D5CDE;
        }
        
        .dem-bar {
            background-color: #0E46E9;
        }
        
        .rep-bar {
            background-color: #E91D0E;
        }
        
        .progress-container {
            height: 24px;
            width: 100%;
            position: relative;
            overflow: hidden;
            border-radius: 0.375rem;
        }
        
        .election-bar {
            position: absolute;
            top: 0;
            height: 100%;
            display: flex;
            align-items: center;
            color: white;
            padding: 0 0.5rem;
            transition: width 0.5s ease;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .status-badge {
            padding: 0.25rem 0.75rem;
            border-radius: 9999px;
            font-weight: 600;
            font-size: 0.875rem;
            line-height: 1.25rem;
            display: inline-block;
        }
        
        .fade-in {
            animation: fadeIn 0.5s ease-in-out;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        .slide-in {
            animation: slideIn 0.5s ease-in-out;
        }
        
        @keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .code-display {
            font-family: monospace;
            white-space: pre-wrap;
            word-break: break-word;
            max-height: 70vh;
            overflow-y: auto;
            background-color: #f8f8f8;
            color: #333;
            padding: 1rem;
            border-radius: 0.375rem;
            font-size: 0.875rem;
            line-height: 1.5;
        }
        
        .dark .code-display {
            background-color: #1e1e1e;
            color: #d4d4d4;
        }
        
        .social-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.5rem 0.75rem;
            border-radius: 0.375rem;
            transition: all 0.2s;
            font-weight: 500;
        }
        
        .twitter-link {
            background-color: #1DA1F2;
            color: white;
        }
        
        .twitter-link:hover {
            background-color: #0c85d0;
        }
        
        .facebook-link {
            background-color: #4267B2;
            color: white;
        }
        
        .facebook-link:hover {
            background-color: #365899;
        }
        
        .website-link {
            background-color: #5D5CDE;
            color: white;
        }
        
        .website-link:hover {
            background-color: #4a49b1;
        }
        
        .instagram-link {
            background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
            color: white;
        }
        
        .instagram-link:hover {
            opacity: 0.9;
        }
        
        .election-result-row {
            margin-bottom: 1.5rem;
        }
        
        .creative-card {
            transition: all 0.3s ease;
        }
        
        .creative-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        .creative-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-radius: 0.375rem 0.375rem 0 0;
        }
        
        .creative-type-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            padding: 0.25rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
            color: white;
            background-color: #5D5CDE;
        }
        
        /* PDF export specific styles */
        @media print {
            body {
                background-color: white !important;
                color: black !important;
            }
            
            .pdf-page-break {
                page-break-after: always;
            }
            
            .no-print {
                display: none !important;
            }
        }
    </style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-200 min-h-screen">
    <!-- Dark mode detection -->
    <script>
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.documentElement.classList.add('dark');
        }
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
            if (event.matches) {
                document.documentElement.classList.add('dark');
            } else {
                document.documentElement.classList.remove('dark');
            }
        });
    </script>

    <div class="container mx-auto px-4 py-8 max-w-6xl">
        <header class="mb-8">
            <h1 class="text-3xl md:text-4xl font-bold text-center mb-4">Congressional District Information Hub</h1>
            <p class="text-gray-600 dark:text-gray-400 text-center mb-6">Comprehensive data on U.S. congressional districts</p>
            
            <div class="flex flex-col sm:flex-row justify-between items-center gap-4">
                <div class="w-full">
                    <div class="relative">
                        <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                            <svg class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
                            </svg>
                        </div>
                        <select id="district-select" class="block p-3 pl-10 w-full text-base text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-primary focus:border-primary dark:bg-gray-700 dark:border-gray-600 dark:text-white">
                            <option value="GA-13">GA-13 (Atlanta Metro)</option>
                        </select>
                    </div>
                </div>
                
                <div class="flex gap-2 w-full sm:w-auto">
                    <button id="add-district-btn" class="w-full sm:w-auto px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition">
                        <span class="flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
                            </svg>
                            Add District
                        </span>
                    </button>
                    <button id="edit-district-btn" class="w-full sm:w-auto px-4 py-2 bg-yellow-600 hover:bg-yellow-700 text-white rounded-md transition">
                        <span class="flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                            </svg>
                            Edit District
                        </span>
                    </button>
                    <button id="export-pdf-btn" class="w-full sm:w-auto px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition">
                        <span class="flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            Export PDF
                        </span>
                    </button>
                    <button id="export-code-btn" class="w-full sm:w-auto px-4 py-2 bg-green-600 hover:bg-green-700 text-white rounded-md transition">
                        <span class="flex items-center justify-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                            </svg>
                            Export Code
                        </span>
                    </button>
                </div>
            </div>
        </header>
        
        <main id="district-info" class="fade-in slide-in"></main>
        
        <!-- Modal for adding/editing district -->
        <div id="district-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 w-full max-w-3xl max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 id="modal-title" class="text-xl font-bold">Add New Congressional District</h2>
                    <button id="close-modal-btn" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <form id="district-form" class="space-y-6">
                    <input type="hidden" id="form-mode" name="formMode" value="add">
                    <input type="hidden" id="original-district-id" name="originalDistrictId" value="">
                    
                    <div class="bg-blue-50 dark:bg-blue-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">District Profile</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">State:</label>
                                <input type="text" name="state" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Georgia (GA)" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">PVI:</label>
                                <input type="text" name="pvi" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. D+21" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Status:</label>
                                <input type="text" name="status" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Safe D" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Incumbent:</label>
                                <input type="text" name="incumbent" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott (D)" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Incumbent Party:</label>
                                <input type="text" name="incumbentParty" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Democratic">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Last Flip:</label>
                                <input type="text" name="lastFlip" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Never Flipped">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">2024 Presidential:</label>
                                <input type="text" name="presidential2024" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Harris +42.1%">
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-indigo-50 dark:bg-indigo-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Incumbent Bio</h3>
                        <div>
                            <label class="block text-sm font-medium mb-1">Bio Text:</label>
                            <textarea name="incumbentBio" rows="4" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief biography of the incumbent..."></textarea>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
                            <div>
                                <label class="block text-sm font-medium mb-1">Website URL:</label>
                                <input type="url" name="incumbentWebsite" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://www.example.gov">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Twitter/X URL:</label>
                                <input type="url" name="incumbentTwitter" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://twitter.com/username">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Facebook URL:</label>
                                <input type="url" name="incumbentFacebook" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://facebook.com/username">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Instagram URL:</label>
                                <input type="url" name="incumbentInstagram" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://instagram.com/username">
                            </div>
                        </div>
                    </div>
                    
                    <!-- Opposing Candidates Section -->
                    <div class="bg-red-50 dark:bg-red-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Opposing Candidates</h3>
                        <p class="text-sm mb-2">Add information about opposing candidates:</p>
                        
                        <div id="opposing-candidates-container">
                            <div class="opposing-candidate border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Candidate Name:</label>
                                        <input type="text" name="opposingName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. John Smith">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Party:</label>
                                        <input type="text" name="opposingParty[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Republican">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Election Year:</label>
                                        <input type="text" name="opposingYear[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 (Current) or 2022 (Former)">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Status:</label>
                                        <select name="opposingStatus[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                            <option value="current">Current Candidate</option>
                                            <option value="former">Former Candidate</option>
                                            <option value="potential">Potential Candidate</option>
                                            <option value="primary">Primary Candidate</option>
                                        </select>
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Bio:</label>
                                        <textarea name="opposingBio[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief biography of the opposing candidate..."></textarea>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Website URL:</label>
                                        <input type="url" name="opposingWebsite[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://www.example.com">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Twitter/X URL:</label>
                                        <input type="url" name="opposingTwitter[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://twitter.com/username">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Facebook URL:</label>
                                        <input type="url" name="opposingFacebook[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://facebook.com/username">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Instagram URL:</label>
                                        <input type="url" name="opposingInstagram[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://instagram.com/username">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Other Social Media:</label>
                                        <input type="text" name="opposingSocial[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. @handle or full URL">
                                    </div>
                                </div>
                                <button type="button" class="remove-opposing-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                                    Remove
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" id="add-opposing-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                            + Add Opposing Candidate
                        </button>
                    </div>
                    
                    <div class="bg-green-50 dark:bg-green-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Demographics</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">White (%):</label>
                                <input type="text" name="white" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 19%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Black (%):</label>
                                <input type="text" name="black" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 66%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Hispanic (%):</label>
                                <input type="text" name="hispanic" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 7%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Asian (%):</label>
                                <input type="text" name="asian" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 5%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Other (%):</label>
                                <input type="text" name="other" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 3%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">College Education (%):</label>
                                <input type="text" name="college" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 31%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Median Income:</label>
                                <input type="text" name="income" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $58,200">
                            </div>
                        </div>
                    </div>
                    
                    <div class="bg-teal-50 dark:bg-teal-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Media Markets & Industries</h3>
                        
                        <!-- Media Markets section with cost per point and percentage -->
                        <div class="mb-4">
                            <label class="block text-sm font-medium mb-1">Media Markets:</label>
                            <div id="media-markets-container">
                                <div class="media-market-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                        <div>
                                            <label class="block text-sm font-medium mb-1">Market Name:</label>
                                            <input type="text" name="mediaMarketName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta DMA">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium mb-1">Cost Per Point:</label>
                                            <input type="text" name="costPerPoint[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,500">
                                        </div>
                                        <div>
                                            <label class="block text-sm font-medium mb-1">Coverage (%):</label>
                                            <input type="text" name="marketCoverage[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 75%">
                                        </div>
                                    </div>
                                    <button type="button" class="remove-media-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                                        Remove
                                    </button>
                                </div>
                            </div>
                            <button type="button" id="add-media-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                                + Add Media Market
                            </button>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium mb-1">Major Industries:</label>
                            <textarea name="industries" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Enter major industries separated by commas or new lines, e.g. Healthcare, Aerospace, etc."></textarea>
                        </div>
                    </div>
                    
                    <div class="bg-purple-50 dark:bg-purple-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Key Communities</h3>
                        <textarea name="communities" rows="4" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Enter communities separated by commas or new lines, e.g. Marietta, Smyrna, etc."></textarea>
                    </div>
                    
                    <!-- Campaign Creatives & Ads section for the form -->
                    <div class="bg-pink-50 dark:bg-pink-900/20 p-4 rounded-md">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-bold">Campaign Creatives & Ads</h3>
                            <div class="flex items-center">
                                <label class="inline-flex items-center mr-2 text-sm">
                                    <input type="checkbox" name="includeCreatives" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                                    <span class="ml-2">Include in district profile</span>
                                </label>
                            </div>
                        </div>
                        <p class="text-sm mb-2">Add examples of previous campaign creatives and advertisements:</p>
                        
                        <div id="creatives-container">
                            <div class="creative-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Title:</label>
                                        <input type="text" name="creativeTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Campaign Launch TV Ad">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Type:</label>
                                        <select name="creativeType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                            <option value="TV">TV Ad</option>
                                            <option value="Digital">Digital Ad</option>
                                            <option value="Mail">Direct Mail</option>
                                            <option value="Print">Print Ad</option>
                                            <option value="Radio">Radio Ad</option>
                                            <option value="Billboard">Billboard</option>
                                            <option value="Other">Other</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Date:</label>
                                        <input type="text" name="creativeDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-05-15">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">URL (if available):</label>
                                        <input type="url" name="creativeUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-video">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Description:</label>
                                        <textarea name="creativeDescription[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief description of the creative/ad..."></textarea>
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Image URL (if available):</label>
                                        <input type="url" name="creativeImageUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-image.jpg">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Notes (optional):</label>
                                        <textarea name="creativeNotes[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Additional notes about the creative..."></textarea>
                                    </div>
                                </div>
                                <button type="button" class="remove-creative-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                                    Remove
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" id="add-creative-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                            + Add Creative/Ad
                        </button>
                    </div>
                    
                    <!-- Recent News Stories section for the form -->
                    <div class="bg-amber-50 dark:bg-amber-900/20 p-4 rounded-md">
                        <div class="flex justify-between items-center mb-2">
                            <h3 class="font-bold">Recent News Stories</h3>
                            <div class="flex items-center">
                                <label class="inline-flex items-center mr-2 text-sm">
                                    <input type="checkbox" name="includeNews" class="form-checkbox h-4 w-4 text-primary rounded" checked>
                                    <span class="ml-2">Include in district profile</span>
                                </label>
                            </div>
                        </div>
                        <p class="text-sm mb-2">Add recent news stories related to the district or candidate:</p>
                        
                        <div id="news-container">
                            <div class="news-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">News Title:</label>
                                        <input type="text" name="newsTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Rep Introduces New Bill">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Date:</label>
                                        <input type="text" name="newsDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-12-15">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Source:</label>
                                        <input type="text" name="newsSource[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta Journal-Constitution">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">URL (optional):</label>
                                        <input type="url" name="newsUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/news-story">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Summary:</label>
                                        <textarea name="newsSummary[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief summary of the news story..."></textarea>
                                    </div>
                                </div>
                                <button type="button" class="remove-news-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                                    Remove
                                </button>
                            </div>
                        </div>
                        
                        <button type="button" id="add-news-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                            + Add News Story
                        </button>
                    </div>
                    
                    <div class="bg-yellow-50 dark:bg-yellow-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Election Results</h3>
                        <p class="text-sm mb-2">Add results for each election cycle:</p>
                        
                        <div id="election-results-container">
                            <div class="election-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Cycle:</label>
                                        <input type="text" name="cycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 General">
                                    </div>
                                    <div class="md:col-span-2">
                                        <label class="block text-sm font-medium mb-1">Election Type:</label>
                                        <select name="electionType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base election-type-select" data-index="0">
                                            <option value="general">General Election</option>
                                            <option value="primary">Primary Election</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                                        <input type="text" name="demCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Dem %:</label>
                                        <input type="text" name="demPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 74.2%">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1" id="oppLabel0">Republican Candidate:</label>
                                        <input type="text" name="gopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Caesar Gonzales">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1" id="oppPctLabel0">GOP %:</label>
                                        <input type="text" name="gopPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 25.8%">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Margin:</label>
                                        <input type="text" name="margin[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. D+48.4%">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" id="add-election-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                            + Add Election Cycle
                        </button>
                    </div>
                    
                    <div class="bg-orange-50 dark:bg-orange-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">Campaign Finance</h3>
                        <p class="text-sm mb-2">Add finance data for each cycle:</p>
                        
                        <div id="finance-container">
                            <div class="finance-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                                <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Cycle:</label>
                                        <input type="text" name="financeCycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                                        <input type="text" name="finDemCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Dem Raised:</label>
                                        <input type="text" name="demRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,213,690">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">Republican Candidate:</label>
                                        <input type="text" name="finGopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Caesar Gonzales">
                                    </div>
                                    <div>
                                        <label class="block text-sm font-medium mb-1">GOP Raised:</label>
                                        <input type="text" name="gopRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $112,450">
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <button type="button" id="add-finance-btn" class="mt-2 px-3 py-1 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 rounded-md text-sm">
                            + Add Finance Cycle
                        </button>
                    </div>
                    
                    <div class="bg-red-50 dark:bg-red-900/20 p-4 rounded-md">
                        <h3 class="font-bold mb-2">District Identifier</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">District ID (e.g. GA-13):</label>
                                <input type="text" id="district-id-input" name="districtId" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. GA-13" required>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">District Name (optional):</label>
                                <input type="text" name="districtName" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta Metro">
                            </div>
                        </div>
                    </div>
                    
                    <div class="flex justify-end gap-3">
                        <button type="button" id="cancel-form-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-md transition">
                            Cancel
                        </button>
                        <button type="submit" id="submit-btn" class="px-4 py-2 bg-primary hover:bg-primary/90 text-white rounded-md transition">
                            Add District
                        </button>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Modal for exporting code -->
        <div id="export-code-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 w-full max-w-5xl max-h-[90vh] overflow-y-auto">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold">Export Complete Code</h2>
                    <button id="close-export-modal-btn" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <div class="mb-4">
                    <p class="text-sm mb-2">Below is the complete HTML, CSS, and JavaScript code with all your districts. Copy this code to save your work permanently.</p>
                    <button id="copy-code-btn" class="px-3 py-1 bg-primary hover:bg-primary/90 text-white rounded-md text-sm">
                        Copy to Clipboard
                    </button>
                </div>
                
                <pre id="code-display" class="code-display"></pre>
            </div>
        </div>
        
        <!-- Modal for exporting PDF -->
        <div id="export-pdf-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
            <div class="bg-white dark:bg-gray-900 rounded-lg shadow-xl p-6 w-full max-w-md">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-xl font-bold">Export to PDF</h2>
                    <button id="close-pdf-modal-btn" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                        </svg>
                    </button>
                </div>
                
                <div class="mb-6 space-y-4">
                    <p>Choose what you want to export to PDF:</p>
                    
                    <div class="flex items-center space-x-2">
                        <input type="radio" id="current-district" name="export-option" value="current" class="h-4 w-4 text-primary focus:ring-primary" checked>
                        <label for="current-district" class="text-sm font-medium">Current district only</label>
                    </div>
                    
                    <div class="flex items-center space-x-2">
                        <input type="radio" id="all-districts" name="export-option" value="all" class="h-4 w-4 text-primary focus:ring-primary">
                        <label for="all-districts" class="text-sm font-medium">All districts</label>
                    </div>
                    
                    <div class="mt-2">
                        <p class="text-sm text-gray-600 dark:text-gray-400">Note: Exporting all districts may take longer depending on how many districts you have.</p>
                    </div>
                </div>
                
                <div class="flex justify-end gap-3">
                    <button id="cancel-pdf-btn" class="px-4 py-2 bg-gray-200 dark:bg-gray-700 hover:bg-gray-300 dark:hover:bg-gray-600 text-gray-900 dark:text-white rounded-md transition">
                        Cancel
                    </button>
                    <button id="confirm-pdf-btn" class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-md transition flex items-center">
                        <span id="export-pdf-btn-text">Export PDF</span>
                        <div id="pdf-loading-spinner" class="hidden ml-2 w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- Hidden container for PDF generation -->
        <div id="pdf-container" class="hidden"></div>
        
        <script>
            // Store all district data
            const districts = {
                "GA-13": {
                    id: "GA-13",
                    name: "Atlanta Metro",
                    profile: {
                        state: "Georgia (GA)",
                        pvi: "D+21",
                        status: "Safe D",
                        incumbent: "David Scott (D)",
                        incumbentParty: "Democratic",
                        lastFlip: "Never Flipped",
                        presidential2024: "Harris +42.1%"
                    },
                    incumbentBio: {
                        bio: "David Scott has served as the U.S. Representative for Georgia's 13th congressional district since 2003. He is a member of the Democratic Party and has been a strong advocate for economic development, veterans affairs, and education.",
                        website: "https://davidscott.house.gov",
                        twitter: "https://twitter.com/repdavidscott",
                        facebook: "https://www.facebook.com/RepDavidScott",
                        instagram: "https://www.instagram.com/repdavidscott"
                    },
                    opposingCandidates: [
                        {
                            name: "Caesar Gonzales",
                            party: "Republican",
                            year: "2024",
                            status: "current",
                            bio: "Caesar Gonzales is a small business owner and community activist who is challenging the incumbent in the 2024 election. He previously ran against David Scott in 2022 and has focused his campaign on economic issues and border security.",
                            website: "https://gonzalesforcongress.com",
                            twitter: "https://twitter.com/CaesarForGA13",
                            facebook: "https://facebook.com/CaesarForGA13",
                            instagram: "https://instagram.com/CaesarForGA13",
                            social: "@CaesarForGA13"
                        },
                        {
                            name: "Dylan Meeks",
                            party: "Republican",
                            year: "2022",
                            status: "former",
                            bio: "Dylan Meeks was the Republican nominee in the 2022 election. He is a former police officer and small business owner who ran on a platform focused on public safety and economic development.",
                            website: "",
                            twitter: "",
                            facebook: "",
                            instagram: "",
                            social: ""
                        }
                    ],
                    demographics: {
                        racial: {
                            white: "19%",
                            black: "66%",
                            hispanic: "7%",
                            asian: "5%",
                            other: "3%"
                        },
                        economic: {
                            college: "31%",
                            income: "$58,200"
                        }
                    },
                    mediaMarkets: [
                        {
                            name: "Atlanta DMA",
                            costPerPoint: "$2,300",
                            coverage: "85%"
                        },
                        {
                            name: "South Metro Atlanta",
                            costPerPoint: "$1,100",
                            coverage: "15%"
                        }
                    ],
                    industries: [
                        "Logistics & Transportation",
                        "Healthcare",
                        "Retail",
                        "Manufacturing"
                    ],
                    communities: [
                        "Marietta",
                        "Smyrna",
                        "Parts of unincorporated Cobb County",
                        "Southwestern Atlanta suburbs"
                    ],
                    creatives: [
                        {
                            title: "Scott for Congress - Economy First",
                            type: "TV",
                            date: "2022-09-15",
                            description: "30-second TV spot highlighting David Scott's economic policies and record of creating jobs in the district.",
                            url: "https://example.com/scott-economy-ad",
                            imageUrl: "https://clerk.house.gov/images/members/S001157.jpg",
                            notes: "This ad ran in the Atlanta media market for 3 weeks leading up to the general election."
                        },
                        {
                            title: "Healthcare Heroes Digital Campaign",
                            type: "Digital",
                            date: "2022-08-01",
                            description: "Series of digital ads thanking healthcare workers and promoting Scott's healthcare policies.",
                            url: "https://example.com/scott-healthcare-ads",
                            imageUrl: "https://static.politico.com/28/ad/c6377f9f4be9adf3cfe5f2050d6c/210113-david-scott-getty-773.jpg",
                            notes: "Facebook and Instagram campaign that generated 1.2M impressions."
                        }
                    ],
                    includeCreatives: true,
                    recentNews: [
                        {
                            title: "Rep. David Scott Introduces New Healthcare Bill",
                            date: "2023-12-15",
                            source: "Atlanta Journal-Constitution",
                            url: "https://example.com/healthcare-bill",
                            summary: "Representative David Scott introduced a new healthcare bill aimed at reducing prescription drug costs for seniors in his district."
                        },
                        {
                            title: "Infrastructure Projects Announced for GA-13",
                            date: "2023-11-05",
                            source: "Georgia Public Broadcasting",
                            url: "https://example.com/infrastructure",
                            summary: "The Department of Transportation announced new infrastructure projects that will impact several communities in Georgia's 13th congressional district."
                        }
                    ],
                    includeNews: true,
                    electionResults: [
                        {
                            cycle: "2024 General",
                            type: "general",
                            demCandidate: "David Scott",
                            demPct: "74.2%",
                            gopCandidate: "Caesar Gonzales",
                            gopPct: "25.8%",
                            margin: "D+48.4%"
                        },
                        {
                            cycle: "2022 General",
                            type: "general",
                            demCandidate: "David Scott",
                            demPct: "76.1%",
                            gopCandidate: "Dylan Meeks",
                            gopPct: "23.9%",
                            margin: "D+52.2%"
                        },
                        {
                            cycle: "2020 General",
                            type: "general",
                            demCandidate: "David Scott",
                            demPct: "77.4%",
                            gopCandidate: "Becky Hites",
                            gopPct: "22.6%",
                            margin: "D+54.8%"
                        }
                    ],
                    finance: [
                        {
                            cycle: "2024",
                            demCandidate: "David Scott",
                            demRaised: "$1,213,690",
                            gopCandidate: "Caesar Gonzales",
                            gopRaised: "$112,450"
                        },
                        {
                            cycle: "2022",
                            demCandidate: "David Scott",
                            demRaised: "$2,007,966",
                            gopCandidate: "Dylan Meeks",
                            gopRaised: "$135,632"
                        },
                        {
                            cycle: "2020",
                            demCandidate: "David Scott",
                            demRaised: "$1,105,780",
                            gopCandidate: "Becky Hites",
                            gopRaised: "$154,932"
                        }
                    ]
                }
            };
            
            // Helper function to get percentage as number from string
            function getPercentageValue(percentStr) {
                if (!percentStr) return 0;
                return parseFloat(percentStr.replace('%', '').trim()) || 0;
            }
            
            // Helper function to get dollar amount as number from string
            function getDollarValue(dollarStr) {
                if (!dollarStr) return 0;
                return parseFloat(dollarStr.replace(/[$,]/g, '').trim()) || 0;
            }
            
            // Helper function to calculate fundraising advantage
            function calculateFundraisingAdvantage(demRaised, gopRaised) {
                const demAmount = getDollarValue(demRaised);
                const gopAmount = getDollarValue(gopRaised);
                const diff = demAmount - gopAmount;
                
                if (diff > 0) {
                    return `D+$${Math.abs(diff).toLocaleString()}`;
                } else if (diff < 0) {
                    return `R+$${Math.abs(diff).toLocaleString()}`;
                } else {
                    return "Even";
                }
            }

            // Helper function to determine status badge color
            function getStatusBadgeColor(status) {
                if (!status) return 'bg-gray-500';
                const statusLower = status.toLowerCase();
                
                if (statusLower.includes('safe d') || statusLower.includes('likely d') || statusLower.includes('lean d')) {
                    return 'bg-democratic';
                } else if (statusLower.includes('safe r') || statusLower.includes('likely r') || statusLower.includes('lean r')) {
                    return 'bg-republican';
                } else if (statusLower.includes('toss up') || statusLower.includes('toss-up')) {
                    return 'bg-purple-600';
                } else {
                    return 'bg-gray-500';
                }
            }
            
            // Helper function to get party color class
            function getPartyColorClass(party) {
                if (party.toLowerCase().includes('d')) {
                    return 'text-democratic';
                } else if (party.toLowerCase().includes('r')) {
                    return 'text-republican';
                } else {
                    return '';
                }
            }
            
            // Helper function to get color for creative type
            function getCreativeTypeColor(type) {
                switch(type.toLowerCase()) {
                    case 'tv': return 'bg-blue-600';
                    case 'digital': return 'bg-green-600';
                    case 'mail': return 'bg-yellow-600';
                    case 'print': return 'bg-orange-600';
                    case 'radio': return 'bg-purple-600';
                    case 'billboard': return 'bg-red-600';
                    default: return 'bg-gray-600';
                }
            }
            
            // Helper function to get opposing candidate status badge
            function getOpposingCandidateStatusBadge(status) {
                if (!status) return 'bg-gray-600';
                
                switch(status.toLowerCase()) {
                    case 'current': return 'bg-green-600';
                    case 'former': return 'bg-gray-600';
                    case 'potential': return 'bg-yellow-600';
                    case 'primary': return 'bg-blue-600';
                    default: return 'bg-gray-600';
                }
            }
            
            // Render the district data with modern UI
            function renderDistrict(districtId, targetElement = document.getElementById('district-info'), forPdf = false) {
                const district = districts[districtId];
                if (!district) return;
                
                // Extract incumbent initials and party for avatar
                const incumbent = district.profile.incumbent || "";
                const incumbentName = incumbent.split('(')[0].trim();
                const incumbentInitials = incumbentName.split(' ').map(name => name[0]).join('');
                const incumbentParty = district.profile.incumbentParty || (incumbent.includes('(D)') ? 'Democratic' : incumbent.includes('(R)') ? 'Republican' : 'Independent');
                const incumbentPartyClass = incumbentParty.toLowerCase().includes('democrat') ? 'democratic' : incumbentParty.toLowerCase().includes('republican') ? 'republican' : 'neutral';
                const avatarBgClass = incumbentPartyClass === 'democratic' ? 'bg-democratic' : incumbentPartyClass === 'republican' ? 'bg-republican' : 'bg-gray-500';
                
                // Determine status badge color
                const statusBadgeColor = getStatusBadgeColor(district.profile.status);
                
                // Format racial demographics as numbers for progress bars
                const whitePct = getPercentageValue(district.demographics.racial.white);
                const blackPct = getPercentageValue(district.demographics.racial.black);
                const hispanicPct = getPercentageValue(district.demographics.racial.hispanic);
                const asianPct = getPercentageValue(district.demographics.racial.asian);
                const otherPct = getPercentageValue(district.demographics.racial.other);
                
                // Calculate fundraising advantages
                const financeWithAdvantage = district.finance.map(finance => {
                    return {
                        ...finance,
                        advantage: calculateFundraisingAdvantage(finance.demRaised, finance.gopRaised),
                        advantageClass: getDollarValue(finance.demRaised) > getDollarValue(finance.gopRaised) 
                            ? 'text-democratic' 
                            : 'text-republican'
                    };
                });
                
                // Build social media links
                let socialLinksHTML = '';
                const bio = district.incumbentBio || {};
                
                if (bio.website) {
                    socialLinksHTML += `
                        <a href="${bio.website}" target="_blank" rel="noopener noreferrer" class="social-link website-link">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                            </svg>
                            Website
                        </a>
                    `;
                }
                
                if (bio.twitter) {
                    socialLinksHTML += `
                        <a href="${bio.twitter}" target="_blank" rel="noopener noreferrer" class="social-link twitter-link">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                            </svg>
                            Twitter/X
                        </a>
                    `;
                }
                
                if (bio.facebook) {
                    socialLinksHTML += `
                        <a href="${bio.facebook}" target="_blank" rel="noopener noreferrer" class="social-link facebook-link">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
                            </svg>
                            Facebook
                        </a>
                    `;
                }
                
                if (bio.instagram) {
                    socialLinksHTML += `
                        <a href="${bio.instagram}" target="_blank" rel="noopener noreferrer" class="social-link instagram-link">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="currentColor" viewBox="0 0 24 24">
                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
                            </svg>
                            Instagram
                        </a>
                    `;
                }
                
                // Build opposing candidates section with social media links
                const opposingCandidatesHTML = district.opposingCandidates && district.opposingCandidates.length > 0 ? 
                    `<div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 col-span-1 md:col-span-2">
                        <h3 class="text-xl font-bold mb-4 border-b pb-2">Opposing Candidates</h3>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                            ${district.opposingCandidates.map(candidate => {
                                const statusBadge = getOpposingCandidateStatusBadge(candidate.status);
                                const partyClass = getPartyColorClass(candidate.party);
                                
                                // Build candidate social links
                                let candidateSocialHTML = '';
                                
                                if (candidate.website) {
                                    candidateSocialHTML += `
                                        <a href="${candidate.website}" target="_blank" rel="noopener noreferrer" class="text-xs bg-primary text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" />
                                            </svg>
                                            Website
                                        </a>
                                    `;
                                }
                                
                                if (candidate.twitter) {
                                    candidateSocialHTML += `
                                        <a href="${candidate.twitter}" target="_blank" rel="noopener noreferrer" class="text-xs bg-blue-500 text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/>
                                            </svg>
                                            Twitter/X
                                        </a>
                                    `;
                                }
                                
                                if (candidate.facebook) {
                                    candidateSocialHTML += `
                                        <a href="${candidate.facebook}" target="_blank" rel="noopener noreferrer" class="text-xs bg-blue-700 text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"/>
                                            </svg>
                                            Facebook
                                        </a>
                                    `;
                                }
                                
                                if (candidate.instagram) {
                                    candidateSocialHTML += `
                                        <a href="${candidate.instagram}" target="_blank" rel="noopener noreferrer" class="text-xs bg-pink-600 text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="currentColor" viewBox="0 0 24 24">
                                                <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zM12 0C8.741 0 8.333.014 7.053.072 2.695.272.273 2.69.073 7.052.014 8.333 0 8.741 0 12c0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98C8.333 23.986 8.741 24 12 24c3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98C15.668.014 15.259 0 12 0zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zM12 16a4 4 0 110-8 4 4 0 010 8zm6.406-11.845a1.44 1.44 0 100 2.881 1.44 1.44 0 000-2.881z"/>
                                            </svg>
                                            Instagram
                                        </a>
                                    `;
                                }
                                
                                if (candidate.social && !candidate.social.includes('http')) {
                                    candidateSocialHTML += `
                                        <span class="text-xs bg-gray-500 text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                            </svg>
                                            ${candidate.social}
                                        </span>
                                    `;
                                } else if (candidate.social && candidate.social.includes('http')) {
                                    candidateSocialHTML += `
                                        <a href="${candidate.social}" target="_blank" rel="noopener noreferrer" class="text-xs bg-gray-500 text-white px-2 py-1 rounded flex items-center gap-1">
                                            <svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                                            </svg>
                                            Other
                                        </a>
                                    `;
                                }

                                return `
                                <div class="bg-gray-50 dark:bg-gray-800 p-4 rounded-lg shadow">
                                    <div class="flex justify-between items-start mb-2">
                                        <h4 class="font-bold text-lg ${partyClass}">${candidate.name}</h4>
                                        <span class="text-xs text-white px-2 py-1 rounded-full ${statusBadge}">
                                            ${candidate.status === 'current' ? 'Current' : 
                                              candidate.status === 'former' ? 'Former' : 
                                              candidate.status === 'potential' ? 'Potential' : 'Primary'}
                                        </span>
                                    </div>
                                    <p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
                                        ${candidate.party} · ${candidate.year}
                                    </p>
                                    <p class="mb-3 text-sm">${candidate.bio}</p>
                                    <div class="flex flex-wrap gap-2">
                                        ${candidateSocialHTML}
                                    </div>
                                </div>
                                `;
                            }).join('')}
                        </div>
                    </div>` : '';
                
                // Build media markets with cost per point and coverage percentage
                const mediaMarketsHTML = district.mediaMarkets && district.mediaMarkets.length > 0 ? 
                    `<div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4">
                        <h3 class="text-xl font-bold mb-4 border-b pb-2">Media Markets</h3>
                        <div class="space-y-4">
                            ${district.mediaMarkets.map(market => `
                                <div class="border-b border-gray-200 dark:border-gray-600 pb-3 last:border-b-0 last:pb-0">
                                    <h4 class="font-semibold">${market.name}</h4>
                                    <div class="grid grid-cols-2 gap-2 mt-1">
                                        <div class="text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Cost Per Point:</span>
                                            <span class="font-medium">${market.costPerPoint || "N/A"}</span>
                                        </div>
                                        <div class="text-sm">
                                            <span class="text-gray-600 dark:text-gray-400">Coverage:</span>
                                            <span class="font-medium">${market.coverage || "N/A"}</span>
                                        </div>
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                    </div>` : '';
                
                // Build major industries
                const industriesHTML = district.industries && district.industries.length > 0 ? 
                    `<div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4">
                        <h3 class="text-xl font-bold mb-4 border-b pb-2">Major Industries</h3>
                        <ul class="list-disc pl-5 space-y-1">
                            ${district.industries.map(industry => `<li>${industry}</li>`).join('')}
                        </ul>
                    </div>` : '';
                
                // Build campaign creatives & ads (only if includeCreatives is true)
                const creativesHTML = (district.includeCreatives !== false && district.creatives && district.creatives.length > 0) ? 
                    `<div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 col-span-1 md:col-span-2">
                        <h3 class="text-xl font-bold mb-4 border-b pb-2">Campaign Creatives & Ads</h3>
                        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
                            ${district.creatives.map(creative => {
                                const typeColor = getCreativeTypeColor(creative.type);
                                return `
                                <div class="creative-card bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden shadow-md relative">
                                    ${creative.imageUrl ? 
                                        `<img src="${creative.imageUrl}" alt="${creative.title}" class="creative-image">` : 
                                        `<div class="creative-image bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
                                            <span class="text-gray-500 dark:text-gray-400">No image available</span>
                                        </div>`
                                    }
                                    <span class="creative-type-badge ${typeColor}">${creative.type}</span>
                                    <div class="p-4">
                                        <h4 class="font-bold text-lg mb-1 line-clamp-2">${creative.title}</h4>
                                        <p class="text-sm text-gray-600 dark:text-gray-400 mb-2">${creative.date || 'No date'}</p>
                                        <p class="text-sm mb-3 line-clamp-3">${creative.description}</p>
                                        ${creative.url ? 
                                            `<a href="${creative.url}" target="_blank" rel="noopener noreferrer" class="inline-flex items-center text-primary hover:text-primary/80">
                                                <span>View creative</span>
                                                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 ml-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                                </svg>
                                            </a>` : 
                                            ''
                                        }
                                        ${creative.notes ? 
                                            `<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
                                                <p class="text-xs text-gray-600 dark:text-gray-400 italic">${creative.notes}</p>
                                            </div>` : 
                                            ''
                                        }
                                    </div>
                                </div>
                                `;
                            }).join('')}
                        </div>
                    </div>` : '';
                
                // Build election results with visual bars
                const electionResultsHTML = district.electionResults.map(result => {
                    const demPct = getPercentageValue(result.demPct);
                    const gopPct = getPercentageValue(result.gopPct);
                    const marginClass = result.margin.includes('D+') ? 'text-democratic' : 'text-republican';
                    const isGeneral = !result.type || result.type === 'general';
                    const oppLabel = isGeneral ? 'Republican' : 'Opponent';
                    
                    return `
                        <div class="election-result-row">
                            <h4 class="font-semibold mb-2">${result.cycle}</h4>
                            <div class="progress-container bg-gray-200 dark:bg-gray-600">
                                <div class="election-bar dem-bar" style="width: ${demPct}%; left: 0;" title="${result.demCandidate} ${result.demPct}">
                                    <span class="text-sm whitespace-nowrap">${result.demCandidate} ${result.demPct}</span>
                                </div>
                                <div class="election-bar rep-bar" style="width: ${gopPct}%; left: ${demPct}%;" title="${result.gopCandidate} ${result.gopPct}">
                                    <span class="text-sm whitespace-nowrap">${result.gopCandidate} ${result.gopPct}</span>
                                </div>
                            </div>
                            <div class="text-right text-sm mt-1 ${marginClass} font-semibold">${result.margin}</div>
                        </div>
                    `;
                }).join('');
                
                // Build recent news stories (only if includeNews is true)
                const recentNewsHTML = (district.includeNews !== false && district.recentNews && district.recentNews.length > 0) ? 
                    `<div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 col-span-1 md:col-span-2">
                        <h3 class="text-xl font-bold mb-4 border-b pb-2">Recent News Stories</h3>
                        <div class="space-y-4">
                            ${district.recentNews.map(news => `
                            <div class="border-b border-gray-200 dark:border-gray-600 pb-4 last:border-b-0 last:pb-0">
                                <h4 class="font-semibold text-lg">
                                    ${news.url ? `<a href="${news.url}" target="_blank" rel="noopener noreferrer" class="text-primary hover:underline">${news.title}</a>` : news.title}
                                </h4>
                                <div class="flex items-center text-sm text-gray-600 dark:text-gray-400 my-1">
                                    <span class="mr-3">${news.source}</span>
                                    <span>${news.date}</span>
                                </div>
                                <p class="mt-2">${news.summary}</p>
                            </div>
                            `).join('')}
                        </div>
                    </div>` : '';
                
                // Create the full district display
                let html = `
                    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden fade-in slide-in${forPdf ? ' pdf-district' : ''}">
                        <div class="card-header bg-gray-100 dark:bg-gray-700 p-4 md:p-6">
                            <div class="flex flex-col md:flex-row md:justify-between md:items-center">
                                <div>
                                    <h2 class="text-2xl md:text-3xl font-bold mb-1">${district.id}${district.name ? `: ${district.name}` : ''}</h2>
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        <span class="status-badge ${statusBadgeColor} text-white">${district.profile.status}</span>
                                        <span class="status-badge bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200">PVI: ${district.profile.pvi}</span>
                                    </div>
                                </div>
                                <div class="mt-4 md:mt-0">
                                    <div class="text-lg font-semibold">Incumbent:</div>
                                    <div class="flex items-center">
                                        <div class="w-10 h-10 rounded-full ${avatarBgClass} flex items-center justify-center text-white font-bold mr-2">${incumbentInitials}</div>
                                        <div>
                                            <div class="font-bold">${incumbentName}</div>
                                            <div class="text-sm text-${incumbentPartyClass}">${incumbentParty}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-4 md:p-6 grid grid-cols-1 md:grid-cols-2 gap-6">
                            <!-- District Overview -->
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">District Overview</h3>
                                <div class="grid grid-cols-2 gap-4">
                                    <div>
                                        <p class="text-gray-600 dark:text-gray-400">State:</p>
                                        <p class="font-semibold">${district.profile.state}</p>
                                    </div>
                                    <div>
                                        <p class="text-gray-600 dark:text-gray-400">Last Flip:</p>
                                        <p class="font-semibold">${district.profile.lastFlip || "Unknown"}</p>
                                    </div>
                                    <div class="col-span-2">
                                        <p class="text-gray-600 dark:text-gray-400">2024 Presidential:</p>
                                        <p class="font-semibold ${district.profile.presidential2024?.includes('Harris') ? 'text-democratic' : 'text-republican'}">${district.profile.presidential2024 || "N/A"}</p>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Incumbent Bio -->
                            ${bio.bio ? `
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">Incumbent Bio</h3>
                                <p class="mb-4">${bio.bio}</p>
                                ${socialLinksHTML ? `
                                <div class="flex flex-wrap gap-2">
                                    ${socialLinksHTML}
                                </div>
                                ` : ''}
                            </div>
                            ` : ''}
                            
                            <!-- Opposing Candidates Section -->
                            ${opposingCandidatesHTML}
                            
                            <!-- Demographics -->
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 ${bio.bio ? 'md:col-span-2' : ''}">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">Demographics</h3>
                                <div class="mb-4">
                                    <h4 class="font-semibold mb-2">Racial Composition</h4>
                                    <div class="flex flex-col gap-2">
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span>Black</span>
                                                <span>${district.demographics.racial.black || "0%"}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: ${blackPct}%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span>White</span>
                                                <span>${district.demographics.racial.white || "0%"}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: ${whitePct}%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span>Hispanic</span>
                                                <span>${district.demographics.racial.hispanic || "0%"}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: ${hispanicPct}%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span>Asian</span>
                                                <span>${district.demographics.racial.asian || "0%"}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: ${asianPct}%"></div>
                                            </div>
                                        </div>
                                        <div>
                                            <div class="flex justify-between mb-1">
                                                <span>Other</span>
                                                <span>${district.demographics.racial.other || "0%"}</span>
                                            </div>
                                            <div class="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2.5">
                                                <div class="bg-primary h-2.5 rounded-full" style="width: ${otherPct}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div>
                                    <h4 class="font-semibold mb-2">Economic & Education</h4>
                                    <div class="grid grid-cols-2 gap-2">
                                        <div>
                                            <p class="text-gray-600 dark:text-gray-400">College Education:</p>
                                            <p class="font-semibold">${district.demographics.economic.college || "N/A"}</p>
                                        </div>
                                        <div>
                                            <p class="text-gray-600 dark:text-gray-400">Median Income:</p>
                                            <p class="font-semibold">${district.demographics.economic.income || "N/A"}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Key Communities -->
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">Key Communities</h3>
                                <ul class="list-disc pl-5 space-y-1">
                                    ${district.communities.map(community => `<li>${community}</li>`).join('')}
                                </ul>
                            </div>
                            
                            <!-- Media Markets -->
                            ${mediaMarketsHTML}
                            
                            <!-- Industries -->
                            ${industriesHTML}
                            
                            <!-- Campaign Creatives & Ads (only if includeCreatives is true) -->
                            ${creativesHTML}
                            
                            <!-- Recent News Stories (only if includeNews is true) -->
                            ${recentNewsHTML}
                            
                            <!-- Election Results -->
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 col-span-1 md:col-span-2">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">Election Results</h3>
                                ${electionResultsHTML}
                            </div>
                            
                            <!-- Campaign Finance -->
                            <div class="bg-white dark:bg-gray-700 rounded-lg shadow p-4 col-span-1 md:col-span-2">
                                <h3 class="text-xl font-bold mb-4 border-b pb-2">Campaign Finance</h3>
                                <div class="overflow-x-auto">
                                    <table class="w-full">
                                        <thead>
                                            <tr class="bg-gray-100 dark:bg-gray-600">
                                                <th class="py-2 px-3 text-left">Cycle</th>
                                                <th class="py-2 px-3 text-left">Democratic Candidate</th>
                                                <th class="py-2 px-3 text-right">Dem Raised</th>
                                                <th class="py-2 px-3 text-left">Republican Candidate</th>
                                                <th class="py-2 px-3 text-right">GOP Raised</th>
                                                <th class="py-2 px-3 text-right">Fundraising Advantage</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            ${financeWithAdvantage.map((finance, index) => `
                                                <tr class="${index % 2 === 0 ? 'bg-gray-50 dark:bg-gray-800' : 'bg-white dark:bg-gray-700'}">
                                                    <td class="py-2 px-3">${finance.cycle}</td>
                                                    <td class="py-2 px-3 text-democratic">${finance.demCandidate}</td>
                                                    <td class="py-2 px-3 text-right">${finance.demRaised}</td>
                                                    <td class="py-2 px-3 text-republican">${finance.gopCandidate}</td>
                                                    <td class="py-2 px-3 text-right">${finance.gopRaised}</td>
                                                    <td class="py-2 px-3 text-right ${finance.advantageClass}">${finance.advantage}</td>
                                                </tr>
                                            `).join('')}
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                
                // For PDF generation of multiple districts, add page break between districts
                if (forPdf) {
                    html += '<div class="pdf-page-break"></div>';
                }
                
                targetElement.innerHTML = html;
            }
            
            // Function to add a new opposing candidate to the form
            function addOpposingCandidate(data = {}) {
                const container = document.getElementById('opposing-candidates-container');
                const newCandidate = document.createElement('div');
                newCandidate.className = 'opposing-candidate border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                
                newCandidate.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Candidate Name:</label>
                            <input type="text" name="opposingName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. John Smith" value="${data.name || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Party:</label>
                            <input type="text" name="opposingParty[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Republican" value="${data.party || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Election Year:</label>
                            <input type="text" name="opposingYear[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 (Current) or 2022 (Former)" value="${data.year || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Status:</label>
                            <select name="opposingStatus[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                <option value="current" ${data.status === 'current' ? 'selected' : ''}>Current Candidate</option>
                                <option value="former" ${data.status === 'former' ? 'selected' : ''}>Former Candidate</option>
                                <option value="potential" ${data.status === 'potential' ? 'selected' : ''}>Potential Candidate</option>
                                <option value="primary" ${data.status === 'primary' ? 'selected' : ''}>Primary Candidate</option>
                            </select>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Bio:</label>
                            <textarea name="opposingBio[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief biography of the opposing candidate...">${data.bio || ''}</textarea>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Website URL:</label>
                            <input type="url" name="opposingWebsite[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://www.example.com" value="${data.website || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Twitter/X URL:</label>
                            <input type="url" name="opposingTwitter[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://twitter.com/username" value="${data.twitter || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Facebook URL:</label>
                            <input type="url" name="opposingFacebook[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://facebook.com/username" value="${data.facebook || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Instagram URL:</label>
                            <input type="url" name="opposingInstagram[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://instagram.com/username" value="${data.instagram || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Other Social Media:</label>
                            <input type="text" name="opposingSocial[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. @handle or full URL" value="${data.social || ''}">
                        </div>
                    </div>
                    <button type="button" class="remove-opposing-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                
                container.appendChild(newCandidate);
                
                // Add remove button functionality
                newCandidate.querySelector('.remove-opposing-btn').addEventListener('click', function() {
                    container.removeChild(newCandidate);
                });
            }
            
            // Function to add a new media market
            function addMediaMarket(data = {}) {
                const container = document.getElementById('media-markets-container');
                const newMarket = document.createElement('div');
                newMarket.className = 'media-market-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                
                newMarket.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Market Name:</label>
                            <input type="text" name="mediaMarketName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta DMA" value="${data.name || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Cost Per Point:</label>
                            <input type="text" name="costPerPoint[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,500" value="${data.costPerPoint || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Coverage (%):</label>
                            <input type="text" name="marketCoverage[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 75%" value="${data.coverage || ''}">
                        </div>
                    </div>
                    <button type="button" class="remove-media-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                
                container.appendChild(newMarket);
                
                // Add remove button functionality
                newMarket.querySelector('.remove-media-btn').addEventListener('click', function() {
                    container.removeChild(newMarket);
                });
            }
            
            // Populate form with district data for editing
            function populateFormWithDistrictData(districtId) {
                const district = districts[districtId];
                if (!district) return;
                
                // Set form mode to edit
                document.getElementById('form-mode').value = 'edit';
                document.getElementById('original-district-id').value = districtId;
                document.getElementById('modal-title').textContent = `Edit Congressional District: ${districtId}`;
                document.getElementById('submit-btn').textContent = 'Save Changes';
                
                // Fill in basic district info
                document.querySelector('input[name="districtId"]').value = district.id;
                document.querySelector('input[name="districtName"]').value = district.name || '';
                
                // Fill in profile data
                document.querySelector('input[name="state"]').value = district.profile.state || '';
                document.querySelector('input[name="pvi"]').value = district.profile.pvi || '';
                document.querySelector('input[name="status"]').value = district.profile.status || '';
                document.querySelector('input[name="incumbent"]').value = district.profile.incumbent || '';
                document.querySelector('input[name="incumbentParty"]').value = district.profile.incumbentParty || '';
                document.querySelector('input[name="lastFlip"]').value = district.profile.lastFlip || '';
                document.querySelector('input[name="presidential2024"]').value = district.profile.presidential2024 || '';
                
                // Fill in incumbent bio
                const bio = district.incumbentBio || {};
                document.querySelector('textarea[name="incumbentBio"]').value = bio.bio || '';
                document.querySelector('input[name="incumbentWebsite"]').value = bio.website || '';
                document.querySelector('input[name="incumbentTwitter"]').value = bio.twitter || '';
                document.querySelector('input[name="incumbentFacebook"]').value = bio.facebook || '';
                document.querySelector('input[name="incumbentInstagram"]').value = bio.instagram || '';
                
                // Fill in demographics
                document.querySelector('input[name="white"]').value = district.demographics.racial.white || '';
                document.querySelector('input[name="black"]').value = district.demographics.racial.black || '';
                document.querySelector('input[name="hispanic"]').value = district.demographics.racial.hispanic || '';
                document.querySelector('input[name="asian"]').value = district.demographics.racial.asian || '';
                document.querySelector('input[name="other"]').value = district.demographics.racial.other || '';
                document.querySelector('input[name="college"]').value = district.demographics.economic.college || '';
                document.querySelector('input[name="income"]').value = district.demographics.economic.income || '';
                
                // Set the checkboxes for optional sections
                document.querySelector('input[name="includeCreatives"]').checked = district.includeCreatives !== false;
                document.querySelector('input[name="includeNews"]').checked = district.includeNews !== false;
                
                // Clear existing containers
                document.getElementById('opposing-candidates-container').innerHTML = '';
                document.getElementById('media-markets-container').innerHTML = '';
                document.getElementById('creatives-container').innerHTML = '';
                document.getElementById('news-container').innerHTML = '';
                document.getElementById('election-results-container').innerHTML = '';
                document.getElementById('finance-container').innerHTML = '';
                
                // Fill in opposing candidates
                if (district.opposingCandidates && district.opposingCandidates.length > 0) {
                    district.opposingCandidates.forEach(candidate => {
                        addOpposingCandidate(candidate);
                    });
                } else {
                    // Add empty opposing candidate if none exist
                    addOpposingCandidate();
                }
                
                // Fill in media markets
                if (district.mediaMarkets && district.mediaMarkets.length > 0) {
                    district.mediaMarkets.forEach(market => {
                        addMediaMarket(market);
                    });
                } else {
                    // Add empty media market if none exist
                    addMediaMarket();
                }
                
                // Fill in industries
                document.querySelector('textarea[name="industries"]').value = district.industries ? district.industries.join('\n') : '';
                
                // Fill in communities
                document.querySelector('textarea[name="communities"]').value = district.communities ? district.communities.join('\n') : '';
                
                // Add campaign creatives
                if (district.creatives && district.creatives.length > 0) {
                    district.creatives.forEach(creative => {
                        addCreative(creative);
                    });
                } else {
                    // Add empty creative if none exist
                    addCreative();
                }
                
                // Add news stories
                if (district.recentNews && district.recentNews.length > 0) {
                    district.recentNews.forEach(news => {
                        addNewsStory(news);
                    });
                } else {
                    // Add empty news item if none exist
                    addNewsStory();
                }
                
                // Add election results
                district.electionResults.forEach(result => {
                    addElectionCycle(result);
                });
                
                // Add finance data
                district.finance.forEach(finance => {
                    addFinanceCycle(finance);
                });
            }
            
            // Create and add creative/ad to form with pre-filled data
            function addCreative(data = {}) {
                const container = document.getElementById('creatives-container');
                const newCreative = document.createElement('div');
                newCreative.className = 'creative-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                
                newCreative.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Title:</label>
                            <input type="text" name="creativeTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Campaign Launch TV Ad" value="${data.title || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Type:</label>
                            <select name="creativeType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                <option value="TV" ${data.type === 'TV' ? 'selected' : ''}>TV Ad</option>
                                <option value="Digital" ${data.type === 'Digital' ? 'selected' : ''}>Digital Ad</option>
                                <option value="Mail" ${data.type === 'Mail' ? 'selected' : ''}>Direct Mail</option>
                                <option value="Print" ${data.type === 'Print' ? 'selected' : ''}>Print Ad</option>
                                <option value="Radio" ${data.type === 'Radio' ? 'selected' : ''}>Radio Ad</option>
                                <option value="Billboard" ${data.type === 'Billboard' ? 'selected' : ''}>Billboard</option>
                                <option value="Other" ${data.type === 'Other' || !data.type ? 'selected' : ''}>Other</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Date:</label>
                            <input type="text" name="creativeDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-05-15" value="${data.date || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">URL (if available):</label>
                            <input type="url" name="creativeUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-video" value="${data.url || ''}">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Description:</label>
                            <textarea name="creativeDescription[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief description of the creative/ad...">${data.description || ''}</textarea>
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Image URL (if available):</label>
                            <input type="url" name="creativeImageUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-image.jpg" value="${data.imageUrl || ''}">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Notes (optional):</label>
                            <textarea name="creativeNotes[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Additional notes about the creative...">${data.notes || ''}</textarea>
                        </div>
                    </div>
                    <button type="button" class="remove-creative-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                
                container.appendChild(newCreative);
                
                // Add remove button functionality
                newCreative.querySelector('.remove-creative-btn').addEventListener('click', function() {
                    container.removeChild(newCreative);
                });
            }
            
            // Create and add news story to form with pre-filled data
            function addNewsStory(data = {}) {
                const container = document.getElementById('news-container');
                const newStory = document.createElement('div');
                newStory.className = 'news-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                
                newStory.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">News Title:</label>
                            <input type="text" name="newsTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Rep Introduces New Bill" value="${data.title || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Date:</label>
                            <input type="text" name="newsDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-12-15" value="${data.date || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Source:</label>
                            <input type="text" name="newsSource[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta Journal-Constitution" value="${data.source || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">URL (optional):</label>
                            <input type="url" name="newsUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/news-story" value="${data.url || ''}">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Summary:</label>
                            <textarea name="newsSummary[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief summary of the news story...">${data.summary || ''}</textarea>
                        </div>
                    </div>
                    <button type="button" class="remove-news-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                
                container.appendChild(newStory);
                
                // Add remove button functionality
                newStory.querySelector('.remove-news-btn').addEventListener('click', function() {
                    container.removeChild(newStory);
                });
            }
            
            // Create and add election cycle to form with pre-filled data
            function addElectionCycle(data = {}) {
                const container = document.getElementById('election-results-container');
                const newCycle = document.createElement('div');
                const cycleIndex = container.children.length;
                newCycle.className = 'election-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                
                newCycle.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Cycle:</label>
                            <input type="text" name="cycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 General" value="${data.cycle || ''}">
                        </div>
                        <div class="md:col-span-2">
                            <label class="block text-sm font-medium mb-1">Election Type:</label>
                            <select name="electionType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base election-type-select" data-index="${cycleIndex}">
                                <option value="general" ${(!data.type || data.type === 'general') ? 'selected' : ''}>General Election</option>
                                <option value="primary" ${data.type === 'primary' ? 'selected' : ''}>Primary Election</option>
                            </select>
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                            <input type="text" name="demCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott" value="${data.demCandidate || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Dem %:</label>
                            <input type="text" name="demPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 74.2%" value="${data.demPct || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1" id="oppLabel${cycleIndex}">${(!data.type || data.type === 'general') ? 'Republican' : 'Opponent'} Candidate:</label>
                            <input type="text" name="gopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="${(!data.type || data.type === 'general') ? 'e.g. Caesar Gonzales' : 'e.g. Primary Opponent'}" value="${data.gopCandidate || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1" id="oppPctLabel${cycleIndex}">${(!data.type || data.type === 'general') ? 'GOP' : 'Opponent'} %:</label>
                            <input type="text" name="gopPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 25.8%" value="${data.gopPct || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Margin:</label>
                            <input type="text" name="margin[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. D+48.4%" value="${data.margin || ''}">
                        </div>
                    </div>
                    <button type="button" class="remove-election-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                container.appendChild(newCycle);
                
                // Add remove button functionality
                newCycle.querySelector('.remove-election-btn').addEventListener('click', function() {
                    container.removeChild(newCycle);
                });
                
                // Add election type change handler
                newCycle.querySelector('.election-type-select').addEventListener('change', function() {
                    const index = this.getAttribute('data-index');
                    const isGeneral = this.value === 'general';
                    
                    document.getElementById(`oppLabel${index}`).textContent = isGeneral ? 'Republican Candidate:' : 'Opponent Candidate:';
                    document.getElementById(`oppPctLabel${index}`).textContent = isGeneral ? 'GOP %:' : 'Opponent %:';
                    
                    const placeholder = isGeneral ? 'e.g. Caesar Gonzales' : 'e.g. Primary Opponent';
                    newCycle.querySelector('input[name="gopCandidate[]"]').placeholder = placeholder;
                });
            }
            
            // Create and add finance cycle to form with pre-filled data
            function addFinanceCycle(data = {}) {
                const container = document.getElementById('finance-container');
                const newCycle = document.createElement('div');
                newCycle.className = 'finance-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3';
                newCycle.innerHTML = `
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div>
                            <label class="block text-sm font-medium mb-1">Cycle:</label>
                            <input type="text" name="financeCycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024" value="${data.cycle || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                            <input type="text" name="finDemCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott" value="${data.demCandidate || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Dem Raised:</label>
                            <input type="text" name="demRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,213,690" value="${data.demRaised || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">Republican Candidate:</label>
                            <input type="text" name="finGopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Caesar Gonzales" value="${data.gopCandidate || ''}">
                        </div>
                        <div>
                            <label class="block text-sm font-medium mb-1">GOP Raised:</label>
                            <input type="text" name="gopRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $112,450" value="${data.gopRaised || ''}">
                        </div>
                    </div>
                    <button type="button" class="remove-finance-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                        Remove
                    </button>
                `;
                container.appendChild(newCycle);
                
                // Add remove button functionality
                newCycle.querySelector('.remove-finance-btn').addEventListener('click', function() {
                    container.removeChild(newCycle);
                });
            }
            
            // Reset form to add district mode
            function resetFormToAddMode() {
                // Reset form mode
                document.getElementById('form-mode').value = 'add';
                document.getElementById('original-district-id').value = '';
                document.getElementById('modal-title').textContent = 'Add New Congressional District';
                document.getElementById('submit-btn').textContent = 'Add District';
                document.getElementById('district-form').reset();
                
                // Make sure checkboxes are checked by default
                document.querySelector('input[name="includeCreatives"]').checked = true;
                document.querySelector('input[name="includeNews"]').checked = true;
                
                // Reset dynamic containers
                document.getElementById('opposing-candidates-container').innerHTML = `
                    <div class="opposing-candidate border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Candidate Name:</label>
                                <input type="text" name="opposingName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. John Smith">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Party:</label>
                                <input type="text" name="opposingParty[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Republican">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Election Year:</label>
                                <input type="text" name="opposingYear[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 (Current) or 2022 (Former)">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Status:</label>
                                <select name="opposingStatus[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                    <option value="current">Current Candidate</option>
                                    <option value="former">Former Candidate</option>
                                    <option value="potential">Potential Candidate</option>
                                    <option value="primary">Primary Candidate</option>
                                </select>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Bio:</label>
                                <textarea name="opposingBio[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief biography of the opposing candidate..."></textarea>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Website URL:</label>
                                <input type="url" name="opposingWebsite[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://www.example.com">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Twitter/X URL:</label>
                                <input type="url" name="opposingTwitter[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://twitter.com/username">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Facebook URL:</label>
                                <input type="url" name="opposingFacebook[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://facebook.com/username">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Instagram URL:</label>
                                <input type="url" name="opposingInstagram[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://instagram.com/username">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Other Social Media:</label>
                                <input type="text" name="opposingSocial[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. @handle or full URL">
                            </div>
                        </div>
                        <button type="button" class="remove-opposing-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                            Remove
                        </button>
                    </div>
                `;
                
                // Add remove button functionality for opposing candidate
                document.querySelector('.remove-opposing-btn').addEventListener('click', function() {
                    const container = document.getElementById('opposing-candidates-container');
                    if (container.children.length > 1) {
                        container.removeChild(this.closest('.opposing-candidate'));
                    }
                });
                
                // Reset media markets container
                document.getElementById('media-markets-container').innerHTML = `
                    <div class="media-market-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Market Name:</label>
                                <input type="text" name="mediaMarketName[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta DMA">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Cost Per Point:</label>
                                <input type="text" name="costPerPoint[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,500">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Coverage (%):</label>
                                <input type="text" name="marketCoverage[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 75%">
                            </div>
                        </div>
                        <button type="button" class="remove-media-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                            Remove
                        </button>
                    </div>
                `;
                
                // Add remove button functionality for media market
                document.querySelector('.remove-media-btn').addEventListener('click', function() {
                    const container = document.getElementById('media-markets-container');
                    if (container.children.length > 1) {
                        container.removeChild(this.closest('.media-market-item'));
                    }
                });
                
                document.getElementById('creatives-container').innerHTML = `
                    <div class="creative-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Title:</label>
                                <input type="text" name="creativeTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Campaign Launch TV Ad">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Type:</label>
                                <select name="creativeType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base">
                                    <option value="TV">TV Ad</option>
                                    <option value="Digital">Digital Ad</option>
                                    <option value="Mail">Direct Mail</option>
                                    <option value="Print">Print Ad</option>
                                    <option value="Radio">Radio Ad</option>
                                    <option value="Billboard">Billboard</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Date:</label>
                                <input type="text" name="creativeDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-05-15">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">URL (if available):</label>
                                <input type="url" name="creativeUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-video">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Description:</label>
                                <textarea name="creativeDescription[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief description of the creative/ad..."></textarea>
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Image URL (if available):</label>
                                <input type="url" name="creativeImageUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/ad-image.jpg">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Notes (optional):</label>
                                <textarea name="creativeNotes[]" rows="2" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Additional notes about the creative..."></textarea>
                            </div>
                        </div>
                        <button type="button" class="remove-creative-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                            Remove
                        </button>
                    </div>
                `;
                
                // Add remove button functionality for the first creative
                document.querySelector('.remove-creative-btn').addEventListener('click', function() {
                    const container = document.getElementById('creatives-container');
                    if (container.children.length > 1) {
                        container.removeChild(this.closest('.creative-item'));
                    }
                });
                
                document.getElementById('news-container').innerHTML = `
                    <div class="news-item border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">News Title:</label>
                                <input type="text" name="newsTitle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Rep Introduces New Bill">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Date:</label>
                                <input type="text" name="newsDate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2023-12-15">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Source:</label>
                                <input type="text" name="newsSource[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Atlanta Journal-Constitution">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">URL (optional):</label>
                                <input type="url" name="newsUrl[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="https://example.com/news-story">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Summary:</label>
                                <textarea name="newsSummary[]" rows="3" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="Brief summary of the news story..."></textarea>
                            </div>
                        </div>
                        <button type="button" class="remove-news-btn mt-2 px-3 py-1 bg-red-100 dark:bg-red-900/30 hover:bg-red-200 dark:hover:bg-red-900/50 text-red-700 dark:text-red-300 rounded-md text-sm">
                            Remove
                        </button>
                    </div>
                `;
                
                // Add remove button functionality for the first news item
                document.querySelector('.remove-news-btn').addEventListener('click', function() {
                    const container = document.getElementById('news-container');
                    if (container.children.length > 1) {
                        container.removeChild(this.closest('.news-item'));
                    }
                });
                
                document.getElementById('election-results-container').innerHTML = `
                    <div class="election-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Cycle:</label>
                                <input type="text" name="cycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024 General">
                            </div>
                            <div class="md:col-span-2">
                                <label class="block text-sm font-medium mb-1">Election Type:</label>
                                <select name="electionType[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base election-type-select" data-index="0">
                                    <option value="general">General Election</option>
                                    <option value="primary">Primary Election</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                                <input type="text" name="demCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Dem %:</label>
                                <input type="text" name="demPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 74.2%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1" id="oppLabel0">Republican Candidate:</label>
                                <input type="text" name="gopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Caesar Gonzales">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1" id="oppPctLabel0">GOP %:</label>
                                <input type="text" name="gopPct[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 25.8%">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Margin:</label>
                                <input type="text" name="margin[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. D+48.4%">
                            </div>
                        </div>
                    </div>
                `;
                
                // Add event listener for the first election type select
                document.querySelector('.election-type-select').addEventListener('change', function() {
                    const index = this.getAttribute('data-index');
                    const isGeneral = this.value === 'general';
                    
                    document.getElementById(`oppLabel${index}`).textContent = isGeneral ? 'Republican Candidate:' : 'Opponent Candidate:';
                    document.getElementById(`oppPctLabel${index}`).textContent = isGeneral ? 'GOP %:' : 'Opponent %:';
                    
                    const placeholder = isGeneral ? 'e.g. Caesar Gonzales' : 'e.g. Primary Opponent';
                    document.querySelector('input[name="gopCandidate[]"]').placeholder = placeholder;
                });
                
                document.getElementById('finance-container').innerHTML = `
                    <div class="finance-cycle border border-gray-300 dark:border-gray-700 p-3 rounded-md mb-3">
                        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-1">Cycle:</label>
                                <input type="text" name="financeCycle[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. 2024">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Democratic Candidate:</label>
                                <input type="text" name="finDemCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. David Scott">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Dem Raised:</label>
                                <input type="text" name="demRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $1,213,690">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">Republican Candidate:</label>
                                <input type="text" name="finGopCandidate[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. Caesar Gonzales">
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-1">GOP Raised:</label>
                                <input type="text" name="gopRaised[]" class="w-full p-2 border border-gray-300 dark:border-gray-700 rounded-md bg-white dark:bg-gray-800 text-base" placeholder="e.g. $112,450">
                            </div>
                        </div>
                    </div>
                `;
                
                // Re-enable district ID in add mode
                document.getElementById('district-id-input').disabled = false;
            }
            
            // Initialize with the first district
            document.addEventListener('DOMContentLoaded', () => {
                renderDistrict('GA-13');
                updateDistrictDropdown();
            });
            
            // Handle district selection
            document.getElementById('district-select').addEventListener('change', function() {
                renderDistrict(this.value);
            });
            
            // Show add district modal
            document.getElementById('add-district-btn').addEventListener('click', function() {
                resetFormToAddMode();
                document.getElementById('district-modal').classList.remove('hidden');
            });
            
            // Show edit district modal
            document.getElementById('edit-district-btn').addEventListener('click', function() {
                const currentDistrictId = document.getElementById('district-select').value;
                populateFormWithDistrictData(currentDistrictId);
                document.getElementById('district-modal').classList.remove('hidden');
            });
            
            // Hide district modal
            document.getElementById('close-modal-btn').addEventListener('click', function() {
                document.getElementById('district-modal').classList.add('hidden');
            });
            
            // Cancel form
            document.getElementById('cancel-form-btn').addEventListener('click', function() {
                document.getElementById('district-modal').classList.add('hidden');
            });
            
            // Add opposing candidate button
            document.getElementById('add-opposing-btn').addEventListener('click', function() {
                addOpposingCandidate();
            });
            
            // Add media market button
            document.getElementById('add-media-btn').addEventListener('click', function() {
                addMediaMarket();
            });
            
            // Add creative/ad button
            document.getElementById('add-creative-btn').addEventListener('click', function() {
                addCreative();
            });
            
            // Add news story button
            document.getElementById('add-news-btn').addEventListener('click', function() {
                addNewsStory();
            });
            
            // Add election cycle button
            document.getElementById('add-election-btn').addEventListener('click', function() {
                addElectionCycle();
            });
            
            // Add finance cycle button
            document.getElementById('add-finance-btn').addEventListener('click', function() {
                addFinanceCycle();
            });
            
            // Form submission
            document.getElementById('district-form').addEventListener('submit', function(e) {
                e.preventDefault();
                
                // Get form data
                const formData = new FormData(this);
                const formMode = formData.get('formMode');
                const originalDistrictId = formData.get('originalDistrictId');
                const districtId = formData.get('districtId');
                const districtName = formData.get('districtName');
                
                if (!districtId) {
                    alert('District ID is required');
                    return;
                }
                
                // Check if district already exists (for add mode only)
                if (formMode === 'add' && districts[districtId]) {
                    alert('District with this ID already exists');
                    return;
                }
                
                // Process communities
                const communitiesText = formData.get('communities');
                const communities = communitiesText
                    ? communitiesText.split(/[,\n]/).map(c => c.trim()).filter(c => c)
                    : [];
                
                // Process industries
                const industriesText = formData.get('industries');
                const industries = industriesText
                    ? industriesText.split(/[,\n]/).map(i => i.trim()).filter(i => i)
                    : [];
                
                // Process opposing candidates
                const opposingCandidates = [];
                const opposingNames = formData.getAll('opposingName[]');
                const opposingParties = formData.getAll('opposingParty[]');
                const opposingYears = formData.getAll('opposingYear[]');
                const opposingStatuses = formData.getAll('opposingStatus[]');
                const opposingBios = formData.getAll('opposingBio[]');
                const opposingWebsites = formData.getAll('opposingWebsite[]');
                const opposingTwitters = formData.getAll('opposingTwitter[]');
                const opposingFacebooks = formData.getAll('opposingFacebook[]');
                const opposingInstagrams = formData.getAll('opposingInstagram[]');
                const opposingSocials = formData.getAll('opposingSocial[]');
                
                for (let i = 0; i < opposingNames.length; i++) {
                    if (opposingNames[i]) {
                        opposingCandidates.push({
                            name: opposingNames[i],
                            party: opposingParties[i] || '',
                            year: opposingYears[i] || '',
                            status: opposingStatuses[i] || 'current',
                            bio: opposingBios[i] || '',
                            website: opposingWebsites[i] || '',
                            twitter: opposingTwitters[i] || '',
                            facebook: opposingFacebooks[i] || '',
                            instagram: opposingInstagrams[i] || '',
                            social: opposingSocials[i] || ''
                        });
                    }
                }
                
                // Process media markets
                const mediaMarkets = [];
                const marketNames = formData.getAll('mediaMarketName[]');
                const costPerPoints = formData.getAll('costPerPoint[]');
                const marketCoverages = formData.getAll('marketCoverage[]');
                
                for (let i = 0; i < marketNames.length; i++) {
                    if (marketNames[i]) {
                        mediaMarkets.push({
                            name: marketNames[i],
                            costPerPoint: costPerPoints[i] || '',
                            coverage: marketCoverages[i] || ''
                        });
                    }
                }
                
                // Process campaign creatives & ads
                const creatives = [];
                const creativeTitles = formData.getAll('creativeTitle[]');
                const creativeTypes = formData.getAll('creativeType[]');
                const creativeDates = formData.getAll('creativeDate[]');
                const creativeUrls = formData.getAll('creativeUrl[]');
                const creativeDescriptions = formData.getAll('creativeDescription[]');
                const creativeImageUrls = formData.getAll('creativeImageUrl[]');
                const creativeNotes = formData.getAll('creativeNotes[]');
                
                for (let i = 0; i < creativeTitles.length; i++) {
                    if (creativeTitles[i] || creativeDescriptions[i]) {
                        creatives.push({
                            title: creativeTitles[i] || '',
                            type: creativeTypes[i] || 'Other',
                            date: creativeDates[i] || '',
                            url: creativeUrls[i] || '',
                            description: creativeDescriptions[i] || '',
                            imageUrl: creativeImageUrls[i] || '',
                            notes: creativeNotes[i] || ''
                        });
                    }
                }
                
                // Process news stories
                const recentNews = [];
                const newsTitles = formData.getAll('newsTitle[]');
                const newsDates = formData.getAll('newsDate[]');
                const newsSources = formData.getAll('newsSource[]');
                const newsUrls = formData.getAll('newsUrl[]');
                const newsSummaries = formData.getAll('newsSummary[]');
                
                for (let i = 0; i < newsTitles.length; i++) {
                    if (newsTitles[i] && newsSummaries[i]) {
                        recentNews.push({
                            title: newsTitles[i],
                            date: newsDates[i] || '',
                            source: newsSources[i] || '',
                            url: newsUrls[i] || '',
                            summary: newsSummaries[i]
                        });
                    }
                }
                
                // Process election results
                const electionResults = [];
                const cycles = formData.getAll('cycle[]');
                const electionTypes = formData.getAll('electionType[]');
                const demCandidates = formData.getAll('demCandidate[]');
                const demPcts = formData.getAll('demPct[]');
                const gopCandidates = formData.getAll('gopCandidate[]');
                const gopPcts = formData.getAll('gopPct[]');
                const margins = formData.getAll('margin[]');
                
                for (let i = 0; i < cycles.length; i++) {
                    if (cycles[i]) {
                        electionResults.push({
                            cycle: cycles[i],
                            type: electionTypes[i] || 'general',
                            demCandidate: demCandidates[i] || '',
                            demPct: demPcts[i] || '',
                            gopCandidate: gopCandidates[i] || '',
                            gopPct: gopPcts[i] || '',
                            margin: margins[i] || ''
                        });
                    }
                }
                
                // Process finance data
                const finance = [];
                const financeCycles = formData.getAll('financeCycle[]');
                const finDemCandidates = formData.getAll('finDemCandidate[]');
                const demRaised = formData.getAll('demRaised[]');
                const finGopCandidates = formData.getAll('finGopCandidate[]');
                const gopRaised = formData.getAll('gopRaised[]');
                
                for (let i = 0; i < financeCycles.length; i++) {
                    if (financeCycles[i]) {
                        finance.push({
                            cycle: financeCycles[i],
                            demCandidate: finDemCandidates[i] || '',
                            demRaised: demRaised[i] || '',
                            gopCandidate: finGopCandidates[i] || '',
                            gopRaised: gopRaised[i] || ''
                        });
                    }
                }
                
                // Process incumbent bio
                const incumbentBio = {
                    bio: formData.get('incumbentBio') || '',
                    website: formData.get('incumbentWebsite') || '',
                    twitter: formData.get('incumbentTwitter') || '',
                    facebook: formData.get('incumbentFacebook') || '',
                    instagram: formData.get('incumbentInstagram') || ''
                };
                
                // Get values for optional sections
                const includeCreatives = formData.get('includeCreatives') === 'on';
                const includeNews = formData.get('includeNews') === 'on';
                
                // Create the district object
                const districtData = {
                    id: districtId,
                    name: districtName || '',
                    profile: {
                        state: formData.get('state') || '',
                        pvi: formData.get('pvi') || '',
                        status: formData.get('status') || '',
                        incumbent: formData.get('incumbent') || '',
                        incumbentParty: formData.get('incumbentParty') || '',
                        lastFlip: formData.get('lastFlip') || '',
                        presidential2024: formData.get('presidential2024') || ''
                    },
                    incumbentBio: incumbentBio,
                    opposingCandidates: opposingCandidates,
                    demographics: {
                        racial: {
                            white: formData.get('white') || '',
                            black: formData.get('black') || '',
                            hispanic: formData.get('hispanic') || '',
                            asian: formData.get('asian') || '',
                            other: formData.get('other') || ''
                        },
                        economic: {
                            college: formData.get('college') || '',
                            income: formData.get('income') || ''
                        }
                    },
                    mediaMarkets,
                    industries,
                    communities,
                    creatives,
                    includeCreatives,
                    recentNews,
                    includeNews,
                    electionResults,
                    finance
                };
                
                // Handle edit mode - remove old district if ID changed
                if (formMode === 'edit' && originalDistrictId !== districtId) {
                    delete districts[originalDistrictId];
                }
                
                // Add or update the district
                districts[districtId] = districtData;
                
                // Update dropdown options
                updateDistrictDropdown();
                
                // Switch to the new/edited district
                document.getElementById('district-select').value = districtId;
                renderDistrict(districtId);
                
                // Hide modal
                document.getElementById('district-modal').classList.add('hidden');
                this.reset();
                
                // Reset form to add mode
                resetFormToAddMode();
            });
            
            // Update dropdown options
            function updateDistrictDropdown() {
                const select = document.getElementById('district-select');
                select.innerHTML = '';
                
                // Sort district IDs
                const sortedIds = Object.keys(districts).sort();
                
                sortedIds.forEach(id => {
                    const option = document.createElement('option');
                    option.value = id;
                    option.textContent = districts[id].name ? `${id} (${districts[id].name})` : id;
                    select.appendChild(option);
                });
            }
            
            // Export code functionality
            document.getElementById('export-code-btn').addEventListener('click', function() {
                const codeModal = document.getElementById('export-code-modal');
                const codeDisplay = document.getElementById('code-display');
                
                // Generate the updated code with all districts
                const allDistricts = JSON.stringify(districts, null, 4);
                
                // Get the current page HTML
                const currentHTML = document.documentElement.outerHTML;
                
                // Replace the initial districts object with the current one
                const updatedCode = currentHTML.replace(
                    /const districts = \{[\s\S]*?\};/,
                    `const districts = ${allDistricts};`
                );
                
                // Display the code
                codeDisplay.textContent = updatedCode;
                
                // Show the modal
                codeModal.classList.remove('hidden');
            });
            
            // Copy code to clipboard
            document.getElementById('copy-code-btn').addEventListener('click', function() {
                const codeDisplay = document.getElementById('code-display');
                const text = codeDisplay.textContent;
                
                navigator.clipboard.writeText(text).then(() => {
                    // Show success message
                    const button = this;
                    const originalText = button.textContent;
                    button.textContent = 'Copied!';
                    button.classList.add('bg-green-600');
                    button.classList.remove('bg-primary');
                    
                    // Reset after 2 seconds
                    setTimeout(() => {
                        button.textContent = originalText;
                        button.classList.remove('bg-green-600');
                        button.classList.add('bg-primary');
                    }, 2000);
                }).catch(err => {
                    console.error('Failed to copy: ', err);
                    alert('Failed to copy code to clipboard. Please try selecting and copying manually.');
                });
            });
            
            // Close export code modal
            document.getElementById('close-export-modal-btn').addEventListener('click', function() {
                document.getElementById('export-code-modal').classList.add('hidden');
            });
            
            // PDF Export functionality
            
            // Show PDF export modal
            document.getElementById('export-pdf-btn').addEventListener('click', function() {
                document.getElementById('export-pdf-modal').classList.remove('hidden');
            });
            
            // Close PDF export modal
            document.getElementById('close-pdf-modal-btn').addEventListener('click', function() {
                document.getElementById('export-pdf-modal').classList.add('hidden');
            });
            
            // Cancel PDF export
            document.getElementById('cancel-pdf-btn').addEventListener('click', function() {
                document.getElementById('export-pdf-modal').classList.add('hidden');
            });
            
            // Generate PDF
            document.getElementById('confirm-pdf-btn').addEventListener('click', async function() {
                // Show loading spinner
                document.getElementById('pdf-loading-spinner').classList.remove('hidden');
                document.getElementById('export-pdf-btn-text').textContent = 'Generating PDF...';
                this.disabled = true;
                
                try {
                    const exportOption = document.querySelector('input[name="export-option"]:checked').value;
                    const pdfContainer = document.getElementById('pdf-container');
                    pdfContainer.innerHTML = '';
                    
                    // Set PDF filename
                    const filename = exportOption === 'current' 
                        ? `${document.getElementById('district-select').value}_district_info.pdf`
                        : 'all_districts_info.pdf';
                    
                    if (exportOption === 'current') {
                        // Export just the current district
                        const currentDistrictId = document.getElementById('district-select').value;
                        renderDistrict(currentDistrictId, pdfContainer, true);
                        
                        // Generate PDF
                        const element = pdfContainer.querySelector('.pdf-district');
                        
                        const pdfOptions = {
                            margin: 10,
                            filename: filename,
                            image: { type: 'jpeg', quality: 0.98 },
                            html2canvas: { scale: 2, useCORS: true },
                            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
                            enableLinks: true,
                            // Text extraction options to ensure copy-paste works
                            autoPaging: true,
                            fontFaces: true,
                            preserveObjectStacking: true
                        };
                        
                        await html2pdf()
                            .from(element)
                            .set(pdfOptions)
                            .toPdf() // Convert to PDF with text extraction
                            .save();
                        
                    } else {
                        // Export all districts
                        const sortedIds = Object.keys(districts).sort();
                        
                        // Create container with all districts
                        sortedIds.forEach(districtId => {
                            const districtContainer = document.createElement('div');
                            districtContainer.className = 'district-container';
                            pdfContainer.appendChild(districtContainer);
                            renderDistrict(districtId, districtContainer, true);
                        });
                        
                        // Generate PDF
                        const pdfOptions = {
                            margin: 10,
                            filename: filename,
                            image: { type: 'jpeg', quality: 0.98 },
                            html2canvas: { scale: 2, useCORS: true },
                            jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },
                            pagebreak: { mode: ['avoid-all', 'css', 'legacy'] },
                            enableLinks: true,
                            // Text extraction options to ensure copy-paste works
                            autoPaging: true,
                            fontFaces: true,
                            preserveObjectStacking: true
                        };
                        
                        await html2pdf()
                            .from(pdfContainer)
                            .set(pdfOptions)
                            .toPdf() // Convert to PDF with text extraction
                            .save();
                    }
                    
                    // Clear the PDF container
                    pdfContainer.innerHTML = '';
                    
                } catch (error) {
                    console.error('Error generating PDF:', error);
                    alert('An error occurred while generating the PDF. Please try again.');
                } finally {
                    // Hide loading spinner and reset button
                    document.getElementById('pdf-loading-spinner').classList.add('hidden');
                    document.getElementById('export-pdf-btn-text').textContent = 'Export PDF';
                    this.disabled = false;
                    
                    // Close modal
                    document.getElementById('export-pdf-modal').classList.add('hidden');
                }
            });
        </script>
    </div>
</body>
</html>
References

Users

Explore

share Share

Codewith.it

cookie Policy

collections Upload images

Converted images

save Save File

auto_awesome Codebot AI

sticky_note_2 Notes

keyboard Command list

account_circle Log in to Codewith.it

code Resources
