{% extends "base.html" %}

{% block title %}Settings - Seismo Fleet Manager{% endblock %}

{% block content %}
<div class="mb-8">
    <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Roster Manager</h1>
    <p class="text-gray-600 dark:text-gray-400 mt-1">Manage your fleet roster data - import, export, and reset</p>
</div>

<!-- CSV Export Section -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
    <div class="flex items-start justify-between">
        <div class="flex-1">
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">Export Roster</h2>
            <p class="text-gray-600 dark:text-gray-400 mb-4">
                Download all roster data as CSV for backup or editing externally
            </p>
        </div>
        <div>
            <a href="/api/settings/export-csv"
               class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors inline-flex items-center gap-2">
                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <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"></path>
                </svg>
                Download CSV
            </a>
        </div>
    </div>
</div>

<!-- CSV Import Section -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Import Roster</h2>

    <form id="importSettingsForm" class="space-y-4">
        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">CSV File *</label>
            <input type="file" name="file" accept=".csv" required
                   class="block w-full text-sm text-gray-900 dark:text-white border border-gray-300 dark:border-gray-600 rounded-lg cursor-pointer bg-gray-50 dark:bg-slate-700 focus:outline-none">
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
                CSV must include column: unit_id (required)
            </p>
        </div>

        <div>
            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">Import Mode *</label>
            <div class="space-y-3">
                <label class="flex items-start gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-slate-700 cursor-pointer">
                    <input type="radio" name="mode" value="merge" checked
                           class="mt-1 w-4 h-4 text-seismo-orange focus:ring-seismo-orange">
                    <div>
                        <div class="font-medium text-gray-900 dark:text-white">Merge/Overwrite</div>
                        <div class="text-sm text-gray-600 dark:text-gray-400">Update existing units, add new units (safe)</div>
                    </div>
                </label>
                <label class="flex items-start gap-3 p-3 rounded-lg border border-red-300 dark:border-red-800 hover:bg-red-50 dark:hover:bg-red-900/20 cursor-pointer">
                    <input type="radio" name="mode" value="replace"
                           class="mt-1 w-4 h-4 text-red-600 focus:ring-red-600">
                    <div>
                        <div class="font-medium text-red-600 dark:text-red-400">Replace All</div>
                        <div class="text-sm text-red-600 dark:text-red-400">⚠️ Delete ALL roster units first, then import (DANGEROUS)</div>
                    </div>
                </label>
            </div>
        </div>

        <div id="importResult" class="hidden"></div>

        <button type="submit" class="px-6 py-3 bg-seismo-orange hover:bg-orange-600 text-white rounded-lg transition-colors">
            Import CSV
        </button>
    </form>
</div>

<!-- Roster Management Table -->
<div class="bg-white dark:bg-slate-800 rounded-xl shadow-lg p-6 mb-6">
    <div class="flex items-center justify-between mb-4">
        <div>
            <h2 class="text-xl font-semibold text-gray-900 dark:text-white">Roster Units</h2>
            <p class="text-gray-600 dark:text-gray-400 text-sm mt-1">
                Manage all units with inline editing and quick actions
            </p>
        </div>
        <button onclick="refreshRosterTable()" class="px-4 py-2 text-seismo-orange hover:bg-orange-50 dark:hover:bg-orange-900/20 rounded-lg transition-colors">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
            </svg>
        </button>
    </div>

    <!-- Loading State -->
    <div id="rosterTableLoading" class="text-center py-8">
        <div class="inline-block animate-spin rounded-full h-8 w-8 border-b-2 border-seismo-orange"></div>
        <p class="text-gray-600 dark:text-gray-400 mt-2">Loading roster units...</p>
    </div>

    <!-- Table Container -->
    <div id="rosterTableContainer" class="hidden overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
                <tr>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Unit ID</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Type</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Status</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Note</th>
                    <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Location</th>
                    <th class="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-300 uppercase">Actions</th>
                </tr>
            </thead>
            <tbody id="rosterTableBody" class="bg-white dark:bg-slate-800 divide-y divide-gray-200 dark:divide-gray-700">
                <!-- Rows will be inserted here by JavaScript -->
            </tbody>
        </table>
    </div>

    <!-- Empty State -->
    <div id="rosterTableEmpty" class="hidden text-center py-8">
        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
        </svg>
        <p class="text-gray-600 dark:text-gray-400 mt-2">No roster units found</p>
    </div>
</div>

<!-- Danger Zone -->
<div class="bg-red-50 dark:bg-red-900/20 rounded-xl border-2 border-red-200 dark:border-red-800 p-6">
    <div class="flex items-start gap-3 mb-6">
        <svg class="w-6 h-6 text-red-600 dark:text-red-400 flex-shrink-0 mt-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
        </svg>
        <div>
            <h2 class="text-xl font-semibold text-red-600 dark:text-red-400 mb-1">Danger Zone</h2>
            <p class="text-sm text-gray-700 dark:text-gray-300">
                Irreversible operations - use with extreme caution
            </p>
        </div>
    </div>

    <div class="space-y-4">
        <!-- Clear All Data -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
            <div class="flex-1">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear All Data</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Delete ALL roster units, emitters, and ignored units
                </p>
            </div>
            <button onclick="confirmClearAll()"
                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
                Clear All
            </button>
        </div>

        <!-- Clear Roster Only -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
            <div class="flex-1">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Roster Table</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Delete all roster units only (keeps emitters and ignored units)
                </p>
            </div>
            <button onclick="confirmClearRoster()"
                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
                Clear Roster
            </button>
        </div>

        <!-- Clear Emitters Only -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
            <div class="flex-1">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Emitters Table</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Delete all auto-discovered emitters (will repopulate automatically)
                </p>
            </div>
            <button onclick="confirmClearEmitters()"
                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
                Clear Emitters
            </button>
        </div>

        <!-- Clear Ignored Only -->
        <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4 p-4 bg-white dark:bg-slate-800 rounded-lg border border-red-200 dark:border-red-800">
            <div class="flex-1">
                <h3 class="font-semibold text-gray-900 dark:text-white mb-1">Clear Ignored Units</h3>
                <p class="text-sm text-gray-600 dark:text-gray-400">
                    Remove all units from the ignore list
                </p>
            </div>
            <button onclick="confirmClearIgnored()"
                    class="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-lg transition-colors whitespace-nowrap">
                Clear Ignored
            </button>
        </div>
    </div>
</div>

<script>
// CSV Import Handler
document.getElementById('importSettingsForm').addEventListener('submit', async function(e) {
    e.preventDefault();

    const formData = new FormData(this);
    const mode = formData.get('mode');
    const resultDiv = document.getElementById('importResult');

    // For replace mode, get confirmation
    if (mode === 'replace') {
        try {
            const stats = await fetch('/api/settings/stats').then(r => r.json());

            const confirmMsg = `⚠️ REPLACE MODE WARNING ⚠️

This will DELETE all ${stats.roster} roster units first, then import from CSV.

THIS CANNOT BE UNDONE!

Make sure you have a backup before proceeding.

Continue?`;

            if (!confirm(confirmMsg)) {
                return;
            }
        } catch (error) {
            alert('Error fetching statistics: ' + error.message);
            return;
        }
    }

    // Choose endpoint based on mode
    const endpoint = mode === 'replace'
        ? '/api/settings/import-csv-replace'
        : '/api/roster/import-csv';

    try {
        const response = await fetch(endpoint, {
            method: 'POST',
            body: formData
        });

        const result = await response.json();

        if (response.ok) {
            resultDiv.className = 'mt-4 p-4 rounded-lg bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200';

            if (mode === 'replace') {
                resultDiv.innerHTML = `
                    <p class="font-semibold mb-2">Import Successful!</p>
                    <ul class="text-sm space-y-1">
                        <li>✅ Deleted: ${result.deleted}</li>
                        <li>✅ Added: ${result.added}</li>
                    </ul>
                `;
            } else {
                resultDiv.innerHTML = `
                    <p class="font-semibold mb-2">Import Successful!</p>
                    <ul class="text-sm space-y-1">
                        <li>✅ Added: ${result.summary.added}</li>
                        <li>🔄 Updated: ${result.summary.updated}</li>
                        <li>⏭️ Skipped: ${result.summary.skipped}</li>
                        <li>❌ Errors: ${result.summary.errors}</li>
                    </ul>
                `;
            }
            resultDiv.classList.remove('hidden');

            // Reset form after 3 seconds
            setTimeout(() => {
                this.reset();
                resultDiv.classList.add('hidden');
            }, 3000);
        } else {
            resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
            resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${result.detail || 'Unknown error'}</p>`;
            resultDiv.classList.remove('hidden');
        }
    } catch (error) {
        resultDiv.className = 'mt-4 p-4 rounded-lg bg-red-100 dark:bg-red-900 text-red-800 dark:text-red-200';
        resultDiv.innerHTML = `<p class="font-semibold">Import Failed</p><p class="text-sm">${error.message}</p>`;
        resultDiv.classList.remove('hidden');
    }
});

// Clear All Data
async function confirmClearAll() {
    try {
        const stats = await fetch('/api/settings/stats').then(r => r.json());

        const message = `⚠️ CLEAR ALL DATA WARNING ⚠️

You are about to DELETE ALL data:

• Roster units: ${stats.roster}
• Emitters: ${stats.emitters}
• Ignored units: ${stats.ignored}
• TOTAL: ${stats.total} records

THIS ACTION CANNOT BE UNDONE!

Export a backup first if needed.

Are you absolutely sure?`;

        if (!confirm(message)) {
            return;
        }

        const response = await fetch('/api/settings/clear-all', {
            method: 'POST'
        });

        if (response.ok) {
            const result = await response.json();
            alert(`✅ Success! Deleted ${result.deleted.total} records\n\n• Roster: ${result.deleted.roster}\n• Emitters: ${result.deleted.emitters}\n• Ignored: ${result.deleted.ignored}`);
            location.reload();
        } else {
            const result = await response.json();
            alert('❌ Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

// Clear Roster Only
async function confirmClearRoster() {
    try {
        const stats = await fetch('/api/settings/stats').then(r => r.json());

        if (!confirm(`Delete all ${stats.roster} roster units?\n\nThis cannot be undone!`)) {
            return;
        }

        const response = await fetch('/api/settings/clear-roster', {
            method: 'POST'
        });

        if (response.ok) {
            const result = await response.json();
            alert(`✅ Success! Deleted ${result.deleted} roster units`);
            location.reload();
        } else {
            const result = await response.json();
            alert('❌ Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

// Clear Emitters Only
async function confirmClearEmitters() {
    try {
        const stats = await fetch('/api/settings/stats').then(r => r.json());

        if (!confirm(`Delete all ${stats.emitters} emitters?\n\nEmitters will repopulate automatically from ACH files.`)) {
            return;
        }

        const response = await fetch('/api/settings/clear-emitters', {
            method: 'POST'
        });

        if (response.ok) {
            const result = await response.json();
            alert(`✅ Success! Deleted ${result.deleted} emitters`);
            location.reload();
        } else {
            const result = await response.json();
            alert('❌ Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

// Clear Ignored Only
async function confirmClearIgnored() {
    try {
        const stats = await fetch('/api/settings/stats').then(r => r.json());

        if (!confirm(`Remove all ${stats.ignored} units from ignore list?\n\nThey will appear as unknown emitters again.`)) {
            return;
        }

        const response = await fetch('/api/settings/clear-ignored', {
            method: 'POST'
        });

        if (response.ok) {
            const result = await response.json();
            alert(`✅ Success! Removed ${result.deleted} units from ignore list`);
            location.reload();
        } else {
            const result = await response.json();
            alert('❌ Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

// ========== ROSTER MANAGEMENT TABLE ==========

// Load roster table on page load
document.addEventListener('DOMContentLoaded', function() {
    loadRosterTable();
});

async function loadRosterTable() {
    const loading = document.getElementById('rosterTableLoading');
    const container = document.getElementById('rosterTableContainer');
    const empty = document.getElementById('rosterTableEmpty');
    const tbody = document.getElementById('rosterTableBody');

    try {
        loading.classList.remove('hidden');
        container.classList.add('hidden');
        empty.classList.add('hidden');

        const response = await fetch('/api/settings/roster-units');
        const units = await response.json();

        if (units.length === 0) {
            loading.classList.add('hidden');
            empty.classList.remove('hidden');
            return;
        }

        tbody.innerHTML = units.map(unit => createRosterRow(unit)).join('');

        loading.classList.add('hidden');
        container.classList.remove('hidden');
    } catch (error) {
        loading.classList.add('hidden');
        alert('Error loading roster: ' + error.message);
    }
}

function createRosterRow(unit) {
    const statusBadges = [];
    if (unit.deployed) {
        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">Deployed</span>');
    } else {
        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300">Benched</span>');
    }
    if (unit.retired) {
        statusBadges.push('<span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">Retired</span>');
    }

    return `
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors" data-unit-id="${unit.id}">
            <td class="px-4 py-3 whitespace-nowrap">
                <a href="/unit/${unit.id}" class="text-sm font-medium text-seismo-orange hover:text-orange-600 dark:hover:text-orange-400">
                    ${unit.id}
                </a>
            </td>
            <td class="px-4 py-3 whitespace-nowrap">
                <div class="text-sm text-gray-900 dark:text-white">${unit.device_type}</div>
                <div class="text-xs text-gray-500 dark:text-gray-400">${unit.unit_type}</div>
            </td>
            <td class="px-4 py-3">
                <div class="flex flex-wrap gap-1">
                    ${statusBadges.join('')}
                </div>
            </td>
            <td class="px-4 py-3">
                <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate" title="${unit.note}">
                    ${unit.note || '<span class="text-gray-400 italic">No note</span>'}
                </div>
            </td>
            <td class="px-4 py-3">
                <div class="text-sm text-gray-600 dark:text-gray-400 max-w-xs truncate" title="${unit.location}">
                    ${unit.location || '<span class="text-gray-400 italic">—</span>'}
                </div>
            </td>
            <td class="px-4 py-3 whitespace-nowrap text-right text-sm">
                <div class="flex justify-end gap-1">
                    <button onclick="toggleDeployed('${unit.id}', ${unit.deployed})"
                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
                        title="${unit.deployed ? 'Bench Unit' : 'Deploy Unit'}">
                        <svg class="w-4 h-4 ${unit.deployed ? 'text-green-600 dark:text-green-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                        </svg>
                    </button>
                    <button onclick="toggleRetired('${unit.id}', ${unit.retired})"
                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors"
                        title="${unit.retired ? 'Unretire Unit' : 'Retire Unit'}">
                        <svg class="w-4 h-4 ${unit.retired ? 'text-purple-600 dark:text-purple-400' : 'text-gray-400'}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path>
                        </svg>
                    </button>
                    <button onclick="editUnit('${unit.id}')"
                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors text-blue-600 dark:text-blue-400"
                        title="Edit Unit">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
                        </svg>
                    </button>
                    <button onclick="confirmDeleteUnit('${unit.id}')"
                        class="p-2 hover:bg-gray-100 dark:hover:bg-gray-600 rounded transition-colors text-red-600 dark:text-red-400"
                        title="Delete Unit">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
                        </svg>
                    </button>
                </div>
            </td>
        </tr>
    `;
}

async function toggleDeployed(unitId, currentState) {
    try {
        const response = await fetch(`/api/roster/set-deployed/${unitId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `deployed=${!currentState}`
        });

        if (response.ok) {
            await loadRosterTable();
        } else {
            const result = await response.json();
            alert('Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
}

async function toggleRetired(unitId, currentState) {
    try {
        const response = await fetch(`/api/roster/set-retired/${unitId}`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: `retired=${!currentState}`
        });

        if (response.ok) {
            await loadRosterTable();
        } else {
            const result = await response.json();
            alert('Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('Error: ' + error.message);
    }
}

function editUnit(unitId) {
    // Navigate to unit detail page for full editing
    window.location.href = `/unit/${unitId}`;
}

async function confirmDeleteUnit(unitId) {
    if (!confirm(`Delete unit ${unitId}?\n\nThis will permanently remove the unit from the roster.\n\nContinue?`)) {
        return;
    }

    try {
        const response = await fetch(`/api/roster/${unitId}`, {
            method: 'DELETE'
        });

        if (response.ok) {
            await loadRosterTable();
            alert(`✅ Unit ${unitId} deleted successfully`);
        } else {
            const result = await response.json();
            alert('❌ Error: ' + (result.detail || 'Unknown error'));
        }
    } catch (error) {
        alert('❌ Error: ' + error.message);
    }
}

function refreshRosterTable() {
    loadRosterTable();
}
</script>
{% endblock %}