{% load i18n %}
{% load static %}

<div class="card border-0 shadow-sm h-100 activity-map-card" style="border-radius: 12px; overflow: hidden;">
    <div class="card-header bg-white border-bottom d-flex align-items-center justify-content-between py-2.5 px-3">
        <div class="d-flex align-items-center gap-2">
            <div class="recent-act-icon rounded-circle d-flex align-items-center justify-content-center" style="background-color: rgba(13, 110, 253, 0.1); width: 34px; height: 34px;">
                <i class="bi bi-geo-alt-fill text-primary"></i>
            </div>
            <div>
                <h6 class="mb-0 fw-bold text-dark">{% translate "Activité des trois derniers mois" %}</h6>
            </div>
        </div>
        <div class="d-flex align-items-center gap-2">
            <div class="btn-group btn-group-sm" role="group" id="activityMapModeToggle">
                <button type="button" class="btn btn-outline-primary" id="btnModeHeatmap">
                    <i class="bi bi-fire me-1"></i>{% translate "Heatmap" %}
                </button>
                <button type="button" class="btn btn-primary active" id="btnModePoints">
                    <i class="bi bi-geo-alt me-1"></i>{% translate "Points" %}
                </button>
            </div>
        </div>
    </div>
    <div class="card-body p-0" style="position: relative; height: 500px;">
        <div id="map" style="width: 100%; height: 100%; position: relative;"></div>
        <div class="activity-map-legend shadow-sm" id="activity-map-legend">
            <!-- Dynamic legend filled by JS -->
        </div>
    </div>
</div>