{% extends 'base.html' %}
{% load djinsight_tags %}

{% block title %}{{ article.title }} - djinsight Example{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8">
        <article>
            <header class="mb-4">
                <h1>{{ article.title }}</h1>
                <div class="article-meta d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <span class="text-muted">
                            By {{ article.author }} on {{ article.published_at|date:"M d, Y H:i" }}
                        </span>
                        {% if article.updated_at != article.published_at %}
                        <span class="text-muted">
                            (Updated: {{ article.updated_at|date:"M d, Y H:i" }})
                        </span>
                        {% endif %}
                    </div>
                    
                    <div class="d-flex gap-2">
                        {% if article.total_views > 0 %}
                            <span class="popularity-badge">
                                🔥 {{ article.total_views|format_view_count }} views
                            </span>
                        {% endif %}
                    </div>
                </div>
            </header>
            
            <div class="content mb-4">
                {{ article.content|linebreaks }}
            </div>
        </article>
        
        <!-- djinsight Analytics Demo Section -->
        <div class="analytics-demo mt-5">
            <h3>📊 djinsight Analytics Demo</h3>
            <p class="text-muted">
                This section demonstrates different ways to display analytics using djinsight modular components.
            </p>
            
            <!-- Individual Components Demo -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Individual Statistics Components</h5>
                    <div class="stats-grid">
                        {% total_views_stat obj=article %}
                        {% unique_views_stat obj=article %}
                        {% last_viewed_stat obj=article %}
                        {% first_viewed_stat obj=article %}
                    </div>
                </div>
                
                <div class="col-md-6">
                    <h5>Time-based Statistics</h5>
                    <div class="stats-grid">
                        {% views_today_stat obj=article %}
                        {% views_week_stat obj=article %}
                        {% views_month_stat obj=article %}
                    </div>
                </div>
            </div>
            
            <!-- Live Counter Demo -->
            <div class="mb-4">
                <h5>Live Statistics Counter</h5>
                <p class="small text-muted">Auto-refreshes every 30 seconds</p>
                {% live_stats_counter obj=article show_unique=True refresh_interval=30 %}
            </div>
            
            <!-- Complete Analytics Widget -->
            <div class="mb-4">
                <h5>Complete Analytics Widget</h5>
                {% page_analytics_widget obj=article period='week' %}
            </div>
            
            <!-- Custom Layout Demo -->
            <div class="mb-4">
                <h5>Custom Layout Example</h5>
                <div class="card">
                    <div class="card-header bg-info text-white">
                        <strong>Article Performance</strong>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-md-4">
                                {% total_views_stat obj=article %}
                            </div>
                            <div class="col-md-4">
                                {% unique_views_stat obj=article %}
                            </div>
                            <div class="col-md-4">
                                {% views_today_stat obj=article %}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Navigation -->
        <div class="mt-4">
            <a href="{% url 'article_list' %}" class="btn btn-secondary">← Back to Articles</a>
            <a href="{% url 'home' %}" class="btn btn-primary">Home</a>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Sidebar with more analytics -->
        <div class="card mb-4">
            <div class="card-header">
                <h5 class="mb-0">📈 Quick Stats</h5>
            </div>
            <div class="card-body">
                <p class="mb-3">This article has been:</p>
                
                <div class="mb-3">
                    {% total_views_stat obj=article %}
                </div>
                
                <div class="mb-3">
                    {% unique_views_stat obj=article %}
                </div>
                
                {% if article.first_viewed_at %}
                <div class="mb-3">
                    {% first_viewed_stat obj=article %}
                </div>
                {% endif %}
                
                {% if article.last_viewed_at %}
                <div class="mb-3">
                    {% last_viewed_stat obj=article %}
                </div>
                {% endif %}
            </div>
        </div>
        
        <!-- Code Examples -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">🔧 Code Examples</h5>
            </div>
            <div class="card-body">
                <p class="small">Here are the template tags used on this page:</p>
                
                <pre class="small bg-light p-2 rounded"><code>{% templatetag openblock %} total_views_stat obj=article {% templatetag closeblock %}
{% templatetag openblock %} unique_views_stat obj=article {% templatetag closeblock %}
{% templatetag openblock %} views_today_stat obj=article {% templatetag closeblock %}
{% templatetag openblock %} live_stats_counter obj=article {% templatetag closeblock %}
{% templatetag openblock %} page_analytics_widget obj=article {% templatetag closeblock %}</code></pre>
                
                <p class="small mt-2">
                    <strong>Format filter:</strong><br>
                    <code>{% templatetag openvariable %} article.total_views|format_view_count {% templatetag closevariable %}</code>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- Track this page view (JavaScript will be injected) -->
{% page_view_tracker obj=article debug=True %}
{% endblock %}

{% block extra_css %}
<style>
.stats-grid {
    display: grid;
    gap: 0.5rem;
}

.analytics-demo {
    border-top: 2px solid #dee2e6;
    padding-top: 2rem;
}

.code-example {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 4px;
    padding: 1rem;
    font-family: monospace;
    font-size: 0.9rem;
}
</style>
{% endblock %} 