{{define "title"}}{{.ActivityName}}{{end}}

{{define "content"}}
<article>
    <header>
        <hgroup>
            <h1>{{.ActivityName}}</h1>
            <h2>{{.ActivityType}} • {{.StartTime.Format "Jan 2, 2006"}}</h2>
        </hgroup>
    </header>
    
    <div class="grid">
        <div>
            <h3>Metrics</h3>
            <ul>
                <li><strong>Distance:</strong> {{printf "%.2f km" (div .Distance 1000)}}</li>
                <li><strong>Duration:</strong> {{.Duration | formatDuration}}</li>
                <li><strong>Avg HR:</strong> {{.AvgHeartRate}} bpm</li>
                <li><strong>Avg Power:</strong> {{.AvgPower}}W</li>
                <li><strong>Calories:</strong> {{.Calories}}</li>
                <li><strong>Steps:</strong> {{.Steps}}</li>
                <li><strong>Elevation Gain:</strong> {{.ElevationGain | formatMeters}}m</li>
            </ul>
        </div>
        <div>
            <h3>Location</h3>
            {{if and (ne .StartLatitude 0) (ne .StartLongitude 0)}}
            <div id="map" style="height: 300px; background: #f0f0f0; border-radius: 4px;">
                <!-- Map will be rendered here -->
            </div>
            <script>
                // Simple static map for now - will be enhanced later
                const mapEl = document.getElementById('map');
                const lat = {{.StartLatitude}};
                const lng = {{.StartLongitude}};
                mapEl.innerHTML = `
                    <iframe 
                        width="100%" 
                        height="300" 
                        frameborder="0" 
                        style="border:0" 
                        src="https://www.openstreetmap.org/export/embed.html?bbox=${lng-0.01},${lat-0.01},${lng+0.01},${lat+0.01}&layer=mapnik&marker=${lat},${lng}">
                    </iframe>
                `;
            </script>
            {{else}}
            <p>No location data available</p>
            {{end}}
        </div>
    </div>
    
    <div>
        <a href="{{.Filename}}" download role="button">Download FIT File</a>
    </div>
</article>
{{end}}

{{define "scripts"}}
<script>
    // Custom formatting function for duration
    function formatDuration(seconds) {
        const hrs = Math.floor(seconds / 3600);
        const mins = Math.floor((seconds % 3600) / 60);
        return `${hrs}h ${mins}m`;
    }
    
    // Register as helper function
    window.formatDuration = formatDuration;
</script>
{{end}}