{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="navigation"></div>
    
    <div class="activities-container">
        <div class="card activities-table-card">
            <div class="card-header">
                <h3>Activities</h3>
            </div>
            <div class="table-container">
                <table class="activities-table" id="activities-table">
                    <thead>
                        <tr>
                            <th>Date</th>
                            <th>Activity Type</th>
                            <th>Duration</th>
                            <th>Distance</th>
                            <th>Max HR</th>
                            <th>Avg HR</th>
                            <th>Power</th>
                            <th>Calories</th>
                        </tr>
                    </thead>
                    <tbody id="activities-tbody">
                        <!-- Data populated by JavaScript -->
                    </tbody>
                </table>
            </div>
            
            <div class="pagination-container">
                <div class="pagination" id="pagination">
                    <!-- Pagination controls -->
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block page_scripts %}
<script src="/static/activities.js"></script>
{% endblock %}