<div id="{{ stats_id }}" class="djinsight-page-stats">
    <span class="djinsight-total-views">
        Views: <span class="djinsight-total-count">-</span>
    </span>
    {% if show_unique %}
    <span class="djinsight-unique-views">
        Unique: <span class="djinsight-unique-count">-</span>
    </span>
    {% endif %}
</div>

<script>
(function() {
    function loadStats() {
        fetch('{{ stats_url }}', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                'page_id': {{ object_id }},
                'content_type': '{{ content_type }}'
            }),
            credentials: 'same-origin'
        })
        .then(function(response) { return response.json(); })
        .then(function(data) {
            if (data.status === 'success') {
                var container = document.getElementById('{{ stats_id }}');
                if (container) {
                    var totalSpan = container.querySelector('.djinsight-total-count');
                    if (totalSpan) totalSpan.textContent = data.total_views;
                    
                    var uniqueSpan = container.querySelector('.djinsight-unique-count');
                    if (uniqueSpan) uniqueSpan.textContent = data.unique_views;
                }
            }
        })
        .catch(function(error) {
            console.error('Error loading object stats:', error);
        });
    }
    
    // Load stats immediately
    loadStats();
    
    {% if refresh_interval %}
    // Set up auto-refresh
    setInterval(loadStats, {{ refresh_interval }});
    {% endif %}
})();
</script> 