{% comment %}
=== djinsight Template Tags Examples ===

This file shows examples of how to use the new modular djinsight template tags.
Copy these examples to your own templates.
{% endcomment %}

{% load djinsight_tags %}

<!-- Example 1: Basic tracking (automatic object detection) -->
<div class="article-content">
    <h1>{{ object.title }}</h1>
    <p>{{ object.content }}</p>
    
    <!-- Track page views automatically -->
    {% page_view_tracker %}
</div>

<!-- Example 2: Explicit object tracking with debug -->
<div class="product-detail">
    <h1>{{ product.name }}</h1>
    <p>${{ product.price }}</p>
    
    <!-- Track with explicit object and debug enabled -->
    {% page_view_tracker obj=product debug=True %}
</div>

<!-- Example 3: Individual statistics components -->
<div class="stats-section">
    <h3>Page Statistics</h3>
    
    <!-- Display individual stats -->
    {% total_views_stat obj=article %}
    {% unique_views_stat obj=article %}
    {% last_viewed_stat obj=article %}
    {% first_viewed_stat obj=article %}
</div>

<!-- Example 4: Period-specific statistics -->
<div class="time-stats">
    <h3>Time-based Statistics</h3>
    
    <div class="stats-grid">
        {% views_today_stat obj=post %}
        {% views_week_stat obj=post %}
        {% views_month_stat obj=post %}
    </div>
</div>

<!-- Example 5: Live statistics counter -->
<div class="live-stats">
    <!-- Auto-refreshing live counter -->
    {% live_stats_counter obj=course show_unique=True refresh_interval=15 %}
</div>

<!-- Example 6: Custom stats display -->
<div class="custom-stats-display">
    {% page_stats_display obj=property show_unique=False refresh_interval=60 %}
</div>

<!-- Example 7: Complete analytics widget -->
<div class="full-analytics">
    {% page_analytics_widget obj=document period='month' %}
</div>

<!-- Example 8: Inline view count formatting -->
<p class="view-count">
    This {{ article.get_display_name }} has been viewed 
    {{ article.total_views|format_view_count }} times by 
    {{ article.unique_views|format_view_count }} unique visitors.
</p>

<!-- Example 9: Conditional statistics -->
{% if article.total_views > 0 %}
    <div class="popular-content">
        <h4>📈 Popular Content</h4>
        {% total_views_stat obj=article %}
        {% unique_views_stat obj=article %}
        {% views_today_stat obj=article %}
    </div>
{% else %}
    <div class="new-content">
        <p>📝 New content - be the first to view!</p>
        {% page_view_tracker obj=article %}
    </div>
{% endif %}

<!-- Example 10: Grid layout with multiple stats -->
<div class="stats-dashboard">
    <div class="stats-row">
        {% total_views_stat obj=video %}
        {% unique_views_stat obj=video %}
    </div>
    
    <div class="stats-row">
        {% views_today_stat obj=video %}
        {% views_week_stat obj=video %}
    </div>
    
    <div class="stats-row">
        {% first_viewed_stat obj=video %}
        {% last_viewed_stat obj=video %}
    </div>
    
    <!-- Live counter at the bottom -->
    {% live_stats_counter obj=video refresh_interval=10 %}
</div>

<!-- Example 11: Mobile-optimized stats -->
<div class="mobile-stats">
    <div class="stat-summary">
        Views: {{ article.total_views|format_view_count }} 
        ({{ article.unique_views|format_view_count }} unique)
    </div>
    
    <!-- Just tracking, no display -->
    {% page_view_tracker obj=article async_load=False %}
</div>

<!-- Example 12: Admin/Editor view with detailed stats -->
{% if user.is_staff %}
<div class="admin-analytics">
    <h3>🔧 Admin Analytics</h3>
    
    <div class="detailed-stats">
        {% total_views_stat obj=page %}
        {% unique_views_stat obj=page %}
        {% first_viewed_stat obj=page %}
        {% last_viewed_stat obj=page %}
        {% views_today_stat obj=page %}
        {% views_week_stat obj=page %}
        {% views_month_stat obj=page %}
    </div>
    
    {% live_stats_counter obj=page show_unique=True refresh_interval=5 %}
</div>
{% endif %}

<style>
/* Example styling for the components */
.stats-section, .time-stats, .live-stats, .full-analytics {
    margin: 1rem 0;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.stats-grid, .stats-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stats-dashboard {
    background: #f5f5f5;
    padding: 1.5rem;
    border-radius: 10px;
    margin: 1rem 0;
}

.mobile-stats {
    display: none;
}

.admin-analytics {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 1rem;
    border-radius: 8px;
    margin: 1rem 0;
}

.detailed-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem;
    margin-bottom: 1rem;
}

@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
    }
    
    .mobile-stats {
        display: block;
    }
    
    .detailed-stats {
        grid-template-columns: 1fr;
    }
}
</style> 