added segments

FitnessSync/backend/templates/activity_view.html

@@ -56,6 +56,9 @@
         <button class="btn btn-primary" id="download-btn">
             <i class="bi bi-download"></i> Download
         </button>
+        <button class="btn btn-success" id="create-segment-btn" onclick="toggleSegmentMode()">
+            <i class="bi bi-bezier2"></i> Create Segment
+        </button>
     </div>
 </div>
 
@@ -113,6 +116,35 @@
 <!-- Detailed Metrics Grid -->
 <h4 class="mb-3">Detailed Metrics</h4>
 <div class="row g-3">
+    <!-- Segments Card -->
+    <div class="col-12 mb-4">
+        <div class="card">
+            <div class="card-header d-flex justify-content-between align-items-center">
+                <h5 class="mb-0">Matched Segments</h5>
+                <!-- Could trigger re-scan here -->
+            </div>
+            <div class="card-body p-0">
+                <div class="table-responsive">
+                    <table class="table table-hover mb-0" id="efforts-table">
+                        <thead class="table-light">
+                            <tr>
+                                <th>Segment</th>
+                                <th>Time</th>
+                                <th>Awards</th>
+                                <th>Rank</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr id="efforts-loading">
+                                <td colspan="4" class="text-center text-muted">Loading segments...</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    </div>
+
     <!-- Heart Rate -->
     <div class="col-md-4">
         <div class="card h-100 metric-card border-danger">
@@ -417,6 +449,7 @@
             const res = await fetch(`/api/activities/${activityId}/details`);
             if (!res.ok) throw new Error("Failed to load details");
             const data = await res.json();
+            window.currentDbId = data.id; // Store for segment creation
 
             // Header
             document.getElementById('act-name').textContent = data.activity_name || 'Untitled Activity';
@@ -460,6 +493,11 @@
                 document.getElementById('m-bike-info').innerHTML = txt;
             }
 
+            // Load Efforts
+            if (window.currentDbId) {
+                loadEfforts(window.currentDbId);
+            }
+
         } catch (e) {
             console.error(e);
             showToast("Error", "Failed to load activity details", "error");
@@ -472,6 +510,10 @@
             if (res.ok) {
                 const geojson = await res.json();
                 if (geojson.features && geojson.features.length > 0 && geojson.features[0].geometry.coordinates.length > 0) {
+                    // GeoJSON coords are [lon, lat]. Leaflet wants [lat, lon]
+                    const coords = geojson.features[0].geometry.coordinates;
+                    trackPoints = coords.map(p => [p[1], p[0]]);
+
                     const layer = L.geoJSON(geojson, {
                         style: { color: 'red', weight: 4, opacity: 0.7 }
                     }).addTo(map);
@@ -492,5 +534,190 @@
     }
 
     function formatDuration(s) { if (!s) return '-'; const h = Math.floor(s / 3600), m = Math.floor((s % 3600) / 60), sec = s % 60; return `${h}h ${m}m ${sec}s`; }
+
+    // Segment Creation Logic
+    let segmentMode = false;
+    let startMarker = null;
+    let endMarker = null;
+    let trackPoints = []; // List of [lat, lon] from GeoJSON
+    let startIndex = 0;
+    let endIndex = 0;
+
+    function toggleSegmentMode() {
+        segmentMode = !segmentMode;
+        const btn = document.getElementById('create-segment-btn');
+        if (segmentMode) {
+            btn.classList.add('active');
+            btn.innerHTML = '<i class="bi bi-check-lg"></i> Save Segment';
+            btn.onclick = saveSegment;
+            initSegmentMarkers();
+        } else {
+            // Cancelled
+            btn.classList.remove('active');
+            btn.innerHTML = '<i class="bi bi-bezier2"></i> Create Segment';
+            btn.onclick = toggleSegmentMode;
+            removeSegmentMarkers();
+        }
+    }
+
+    function removeSegmentMarkers() {
+        if (startMarker) map.removeLayer(startMarker);
+        if (endMarker) map.removeLayer(endMarker);
+        startMarker = null;
+        endMarker = null;
+    }
+
+    function initSegmentMarkers() {
+        if (trackPoints.length < 2) {
+            alert("Not enough points to create a segment.");
+            toggleSegmentMode();
+            return;
+        }
+
+        // Default positions: 20% and 80%
+        startIndex = Math.floor(trackPoints.length * 0.2);
+        endIndex = Math.floor(trackPoints.length * 0.8);
+
+        const startIcon = L.divIcon({ className: 'bg-success rounded-circle border border-white', iconSize: [12, 12] });
+        const endIcon = L.divIcon({ className: 'bg-danger rounded-circle border border-white', iconSize: [12, 12] });
+
+        startMarker = L.marker(trackPoints[startIndex], { draggable: true, icon: startIcon }).addTo(map);
+        endMarker = L.marker(trackPoints[endIndex], { draggable: true, icon: endIcon }).addTo(map);
+
+        // Snap logic
+        function setupDrag(marker, isStart) {
+            marker.on('drag', function (e) {
+                const ll = e.latlng;
+                let closestDist = Infinity;
+                let closestIdx = -1;
+                // Simple snap for visual feedback during drag
+                for (let i = 0; i < trackPoints.length; i++) {
+                    const d = map.distance(ll, trackPoints[i]);
+                    if (d < closestDist) {
+                        closestDist = d;
+                        closestIdx = i;
+                    }
+                }
+                // Optional: visual snap? Leaflet handles drag msg.
+            });
+
+            marker.on('dragend', function (e) {
+                const ll = e.target.getLatLng();
+                let closestDist = Infinity;
+                let closestIdx = -1;
+
+                // constrain search
+                let searchStart = 0;
+                let searchEnd = trackPoints.length;
+
+                if (isStart) {
+                    // Start marker: can search 0 to trackPoints.length
+                    // Heuristic: If we are modifying Start, look for points < endIndex (if valid).
+                    if (endIndex > 0) searchEnd = endIndex;
+                } else {
+                    // End marker
+                    if (startIndex >= 0) searchStart = startIndex;
+                }
+
+                // "Stickiness" logic
+                const currentIndex = isStart ? startIndex : endIndex;
+                const indexPenalty = 0.0001;
+
+                for (let i = searchStart; i < searchEnd; i++) {
+                    const d_spatial = map.distance(ll, trackPoints[i]);
+                    const d_index = Math.abs(i - currentIndex);
+
+                    const score = d_spatial + (d_index * indexPenalty);
+
+                    if (score < closestDist) {
+                        closestDist = score;
+                        closestIdx = i;
+                    }
+                }
+
+                if (closestIdx !== -1) {
+                    marker.setLatLng(trackPoints[closestIdx]);
+                    if (isStart) startIndex = closestIdx;
+                    else endIndex = closestIdx;
+                }
+            });
+        }
+
+        setupDrag(startMarker, true);
+        setupDrag(endMarker, false);
+    }
+
+    async function saveSegment() {
+        if (startIndex >= endIndex) {
+            alert("Start point must be before End point.");
+            return;
+        }
+
+        const name = prompt("Enter Segment Name:");
+        if (!name) return;
+
+        try {
+            const res = await fetch('/api/segments/create', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    name: name,
+                    activity_id: window.currentDbId,
+                    start_index: startIndex,
+                    end_index: endIndex
+                })
+            });
+
+            if (res.ok) {
+                alert("Segment created!");
+                toggleSegmentMode(); // Reset UI
+            } else {
+                const err = await res.json();
+                alert("Error: " + err.detail);
+            }
+            // Load Segments
+            loadEfforts(window.currentDbId);
+
+        } catch (e) {
+            console.error(e);
+            alert("Error loading activity: " + e.message);
+        }
+    }
+
+    async function loadEfforts(dbId) {
+        const tbody = document.querySelector('#efforts-table tbody');
+        try {
+            const res = await fetch(`/api/activities/${dbId}/efforts`);
+            if (res.ok) {
+                const efforts = await res.json();
+                tbody.innerHTML = '';
+                if (efforts.length === 0) {
+                    tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">No segments matched.</td></tr>';
+                    return;
+                }
+
+                efforts.forEach(eff => {
+                    const tr = document.createElement('tr');
+                    let awards = '';
+                    if (eff.is_kom) awards += '<span class="badge bg-warning text-dark me-1"><i class="bi bi-trophy-fill"></i> CR</span>';
+                    if (eff.is_pr) awards += '<span class="badge bg-success me-1"><i class="bi bi-award-fill"></i> PR</span>';
+
+                    tr.innerHTML = `
+                        <td><strong>${eff.segment_name}</strong></td>
+                        <td>${formatDuration(eff.elapsed_time)}</td>
+                        <td>${awards}</td>
+                        <td>${eff.kom_rank ? '#' + eff.kom_rank : '-'}</td>
+                     `;
+                    tbody.appendChild(tr);
+                });
+            } else {
+                tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Failed to load segments.</td></tr>';
+            }
+        } catch (e) {
+            tbody.innerHTML = '<tr><td colspan="4" class="text-center text-muted">Error loading segments.</td></tr>';
+        }
+    }
+
+    // Leaflet Map Init
 </script>
 {% endblock %}

FitnessSync/backend/templates/base.html

@@ -72,6 +72,9 @@
                 <a class="nav-link {% if request.path == '/activities' %}active{% endif %}"
                     href="/activities">Activities</a>
             </li>
+            <li class="nav-item">
+                <a class="nav-link {% if request.path == '/segments' %}active{% endif %}" href="/segments">Segments</a>
+            </li>
             <li class="nav-item">
                 <a class="nav-link {% if request.path == '/garmin-health' %}active{% endif %}"
                     href="/garmin-health">Garmin Health</a>

FitnessSync/backend/templates/index.html

@@ -523,6 +523,12 @@
                             actionsHtml += `<button class="btn btn-sm btn-outline-danger" onclick="cancelJob('${job.id}')" title="Cancel"><i class="bi bi-x-circle"></i></button>`;
                         }
 
+                        // force kill button: show if running/queued/paused regardless of cancel_requested
+                        // Use a trash icon or skulls
+                        if (['running', 'queued', 'paused'].includes(job.status)) {
+                            actionsHtml += `<button class="btn btn-sm btn-danger ms-1" onclick="forceKillJob('${job.id}')" title="Force Kill (Mark Failed)"><i class="bi bi-trash-fill"></i></button>`;
+                        }
+
                         row.innerHTML = `
                             <td><span class="${statusClass}">${job.operation}</span></td>
                             <td><small class="text-muted">${job.id.substring(0, 8)}...</small></td>
@@ -642,17 +648,21 @@
     async function cancelJob(id) {
         if (!confirm("Are you sure you want to cancel this job?")) return;
         try {
-            await fetch(`/api/jobs/${id}/cancel`, { method: 'POST' }); // Wait, endpoint exists?
-            // Ah, I need to check if cancel endpoint exists in status.py!
-            // Actually request_cancel exists in manager, but verify API expose.
-            // Earlier views of status.py showed trigger endpoints.
-            // Let's assume standard /api/jobs/{id}/cancel might use DELETE or POST.
-            // Checking: src/api/status.py has cancel endpoint?
-            // If not, I need to add it.
+            await fetch(`/api/jobs/${id}/cancel`, { method: 'POST' });
             loadDashboardData();
         } catch (e) { showToast("Error", "Failed to cancel job", "error"); }
     }
 
+    async function forceKillJob(id) {
+        if (!confirm("WARNING: Force Kill should only be used if a job is stuck!\n\nIt will mark the job as failed immediately but may not stop the background process if it is truly frozen.\n\nAre you sure?")) return;
+        try {
+            const res = await fetch(`/api/jobs/${id}/force-kill`, { method: 'POST' });
+            if (!res.ok) throw new Error("Failed to force kill");
+            showToast("Force Kill", "Job marked as failed.", "warning");
+            loadDashboardData();
+        } catch (e) { showToast("Error", "Failed to force kill job", "error"); }
+    }
+
     function toggleSyncButtons(disabled) {
         const ids = [
             'sync-activities-btn', 'sync-all-activities-btn',
@@ -920,6 +930,9 @@
                 <td>${job.last_run ? new Date(job.last_run).toLocaleString() : 'Never'}</td>
                 <td class="${nextRunClass}">${job.next_run ? new Date(job.next_run).toLocaleString() : '-'}</td>
                 <td>
+                    <button class="btn btn-sm btn-outline-success me-1" onclick="runJob(${job.id})" title="Run Now">
+                        <i class="bi bi-play-fill"></i> Run
+                    </button>
                     <button class="btn btn-sm btn-outline-primary" onclick="openEditModal(${job.id}, '${job.name}', ${job.interval_minutes}, ${job.enabled}, '${encodeURIComponent(JSON.stringify(JSON.parse(job.params || '{}')))}')">
                         <i class="bi bi-pencil"></i> Edit
                     </button>
@@ -957,6 +970,22 @@
         }
     }
 
+    async function runJob(id) {
+        if (!confirm("Run this scheduled job immediately?")) return;
+
+        try {
+            const response = await fetch(`/api/scheduling/jobs/${id}/run`, { method: 'POST' });
+            if (!response.ok) throw new Error("Failed to trigger job");
+
+            showToast("Job Triggered", "The scheduled job has been started.", "success");
+            loadJobs();
+            // Start polling or refresh dashboard active queue
+            loadDashboardData();
+        } catch (e) {
+            showToast("Error", e.message, "error");
+        }
+    }
+
     async function saveJob() {
         const id = document.getElementById('edit-job-id').value;
         const interval = parseInt(document.getElementById('edit-job-interval').value);

FitnessSync/backend/templates/segments.html

@@ -0,0 +1,328 @@
+{% extends "base.html" %}
+
+{% block head %}
+<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
+    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
+{% endblock %}
+
+{% block content %}
+<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
+    <h1 class="h2">Segments</h1>
+    <div class="btn-toolbar mb-2 mb-md-0">
+        <button type="button" class="btn btn-sm btn-outline-secondary me-2" onclick="scanSegments()">
+            <i class="bi bi-arrow-repeat"></i> Scan All Activities
+        </button>
+        <div class="btn-group me-2">
+            <button type="button" class="btn btn-sm btn-outline-secondary" onclick="loadSegments()">Refresh</button>
+        </div>
+        <button type="button" class="btn btn-sm btn-outline-secondary" data-bs-toggle="modal"
+            data-bs-target="#createSegmentModal">
+            Create Segment
+        </button>
+    </div>
+</div>
+
+<div class="table-responsive">
+    <table class="table table-striped table-hover" id="segments-table">
+        <thead>
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Type</th>
+                <th>Distance</th>
+                <th>Elevation</th>
+                <th>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td colspan="6" class="text-center">Loading...</td>
+            </tr>
+        </tbody>
+    </table>
+</div>
+
+
+<!-- View Modal -->
+<div class="modal fade" id="viewSegmentModal" tabindex="-1">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="view-seg-title">Segment Details</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+            </div>
+            <div class="modal-body">
+                <!-- Tabs -->
+                <ul class="nav nav-tabs mb-3" id="segTabs" role="tablist">
+                    <li class="nav-item">
+                        <button class="nav-link active" id="map-tab" data-bs-toggle="tab" data-bs-target="#map-pane"
+                            type="button">Map & Profile</button>
+                    </li>
+                    <li class="nav-item">
+                        <button class="nav-link" id="leaderboard-tab" data-bs-toggle="tab"
+                            data-bs-target="#leaderboard-pane" type="button">Leaderboard</button>
+                    </li>
+                </ul>
+
+                <div class="tab-content">
+                    <!-- Map & Profile Pane -->
+                    <div class="tab-pane fade show active" id="map-pane">
+                        <div id="seg-map" style="height: 300px; width: 100%;" class="mb-3 border rounded"></div>
+                        <h6 class="text-muted">Elevation Profile</h6>
+                        <div style="height: 150px; width: 100%;">
+                            <canvas id="elevationChart"></canvas>
+                        </div>
+                    </div>
+
+                    <!-- Leaderboard Pane -->
+                    <div class="tab-pane fade" id="leaderboard-pane">
+                        <div class="table-responsive">
+                            <table class="table table-sm table-striped" id="leaderboard-table">
+                                <thead>
+                                    <tr>
+                                        <th>Rank</th>
+                                        <th>Date</th>
+                                        <th>Time</th>
+                                        <th>Avg HR</th>
+                                        <th>Watts</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr>
+                                        <td colspan="5" class="text-center">Loading...</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
+    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
+<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+<script>
+    async function scanSegments() {
+        if (!confirm("This will rescan ALL activities for all segments. It may take a while. Continue?")) return;
+
+        try {
+            const response = await fetch('/api/segments/scan', { method: 'POST' });
+            if (!response.ok) throw new Error("Scan failed");
+            const data = await response.json();
+            alert("Scan started! Background Job ID: " + data.job_id);
+        } catch (e) {
+            alert("Error: " + e.message);
+        }
+    }
+
+    async function loadSegments() {
+        try {
+            const res = await fetch('/api/segments');
+            if (!res.ok) throw new Error("Failed to fetch segments");
+            const segments = await res.json();
+
+            const tbody = document.querySelector('#segments-table tbody');
+            tbody.innerHTML = '';
+
+            if (segments.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="6" class="text-center text-muted">No segments found.</td></tr>';
+                return;
+            }
+
+            segments.forEach(seg => {
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td>${seg.id}</td>
+                    <td><strong>${seg.name}</strong></td>
+                    <td><span class="badge bg-secondary">${seg.activity_type}</span></td>
+                    <td>${(seg.distance / 1000).toFixed(2)} km</td>
+                    <td>${seg.elevation_gain ? seg.elevation_gain.toFixed(1) + ' m' : '-'}</td>
+                    <td>
+                        <button class="btn btn-sm btn-outline-primary me-1" onclick='viewSegment(${JSON.stringify(seg)})'>
+                            <i class="bi bi-eye"></i> View
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" onclick="deleteSegment(${seg.id})">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                    </td>
+                `;
+                tbody.appendChild(tr);
+            });
+
+        } catch (e) {
+            console.error(e);
+            document.querySelector('#segments-table tbody').innerHTML = '<tr><td colspan="6" class="text-danger text-center">Error loading segments.</td></tr>';
+        }
+    }
+
+    async function deleteSegment(id) {
+        if (!confirm("Are you sure you want to delete this segment? All matched efforts will be lost.")) return;
+
+        try {
+            const res = await fetch(`/api/segments/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+                loadSegments();
+            } else {
+                alert("Failed to delete segment");
+            }
+        } catch (e) {
+            alert("Error: " + e.message);
+        }
+    }
+
+    let map = null;
+    let elevationChart = null;
+
+    function viewSegment(seg) {
+        const modal = new bootstrap.Modal(document.getElementById('viewSegmentModal'));
+        document.getElementById('view-seg-title').textContent = seg.name;
+
+        // Reset Tabs
+        const triggerEl = document.querySelector('#segTabs button[data-bs-target="#map-pane"]');
+        bootstrap.Tab.getInstance(triggerEl)?.show() || new bootstrap.Tab(triggerEl).show();
+
+        modal.show();
+
+        // Load Leaderboard
+        loadLeaderboard(seg.id);
+
+        // Wait for modal to show
+        setTimeout(() => {
+            // --- Map Setup ---
+            if (map) {
+                map.remove();
+                map = null;
+            }
+
+            if (!seg.points || seg.points.length === 0) return;
+
+            map = L.map('seg-map');
+            L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+                attribution: '&copy; OpenStreetMap'
+            }).addTo(map);
+
+            // Correct [lon, lat, ele] to [lat, lon]
+            const latlongs = seg.points.map(p => [p[1], p[0]]);
+
+            const poly = L.polyline(latlongs, { color: 'red' }).addTo(map);
+            map.fitBounds(poly.getBounds());
+
+            // --- Chart Setup ---
+            if (elevationChart) {
+                elevationChart.destroy();
+                elevationChart = null;
+            }
+
+            // Extract Elevation Data
+            // Points are [lon, lat, ele]. Some might be missing ele (undefined/null) or have only 2 coords.
+            const distances = [];
+            const elevations = [];
+            let distAccum = 0;
+
+            // Calculate cumulative distance for X-axis
+            for (let i = 0; i < seg.points.length; i++) {
+                const p = seg.points[i];
+                if (i > 0) {
+                    const prev = seg.points[i - 1];
+                    // Haversine approx
+                    const R = 6371e3;
+                    const φ1 = prev[1] * Math.PI / 180;
+                    const φ2 = p[1] * Math.PI / 180;
+                    const Δφ = (p[1] - prev[1]) * Math.PI / 180;
+                    const Δλ = (p[0] - prev[0]) * Math.PI / 180;
+                    const a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
+                        Math.cos(φ1) * Math.cos(φ2) *
+                        Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
+                    const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+                    distAccum += R * c;
+                }
+
+                distances.push((distAccum / 1000).toFixed(2)); // km
+                // Check for elevation
+                const ele = (p.length > 2 && p[2] !== null) ? p[2] : null;
+                elevations.push(ele);
+            }
+
+            // Filter out nulls if mostly null? Or Chart.js handles nulls (gaps).
+            // Let's render what we have.
+
+            const ctx = document.getElementById('elevationChart').getContext('2d');
+            elevationChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: distances,
+                    datasets: [{
+                        label: 'Elevation (m)',
+                        data: elevations,
+                        borderColor: 'rgb(75, 192, 192)',
+                        backgroundColor: 'rgba(75, 192, 192, 0.2)',
+                        fill: true,
+                        tension: 0.1,
+                        pointRadius: 0 // Hide points for smooth look
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: {
+                        x: { display: true, title: { display: true, text: 'Distance (km)' } },
+                        y: { display: true, title: { display: true, text: 'Elevation (m)' } }
+                    },
+                    plugins: { legend: { display: false } }
+                }
+            });
+
+        }, 500);
+    }
+
+    async function loadLeaderboard(segmentId) {
+        const tbody = document.querySelector('#leaderboard-table tbody');
+        tbody.innerHTML = '<tr><td colspan="5" class="text-center">Loading...</td></tr>';
+
+        try {
+            const res = await fetch(`/api/segments/${segmentId}/efforts`);
+            if (!res.ok) throw new Error("Failed to load leaderboard");
+            const efforts = await res.json();
+
+            tbody.innerHTML = '';
+
+            if (efforts.length === 0) {
+                tbody.innerHTML = '<tr><td colspan="5" class="text-center text-muted">No efforts matching this segment.</td></tr>';
+                return;
+            }
+
+            efforts.forEach((effort, index) => {
+                const date = new Date(effort.start_time).toLocaleDateString();
+                const timeStr = new Date(effort.elapsed_time * 1000).toISOString().substr(11, 8); // HH:MM:SS
+
+                // Rank icons
+                let rank = index + 1;
+                if (rank === 1) rank = '🥇 1';
+                else if (rank === 2) rank = '🥈 2';
+                else if (rank === 3) rank = '🥉 3';
+
+                const tr = document.createElement('tr');
+                tr.innerHTML = `
+                    <td>${rank}</td>
+                    <td>${date}</td>
+                    <td>${timeStr}</td>
+                    <td>${effort.avg_hr || '-'}</td>
+                    <td>${effort.avg_power || '-'}</td>
+                `;
+                tbody.appendChild(tr);
+            });
+
+        } catch (e) {
+            console.error(e);
+            tbody.innerHTML = '<tr><td colspan="5" class="text-center text-danger">Error loading leaderboard.</td></tr>';
+        }
+    }
+
+    document.addEventListener('DOMContentLoaded', loadSegments);
+</script>
+{% endblock %}