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

{% block title %}Popular Content - djinsight Example{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h1>📊 Popular Content Dashboard</h1>
    <a href="{% url 'home' %}" class="btn btn-secondary">← Home</a>
</div>

<div class="alert alert-info mb-4">
    <h5>🚀 djinsight Analytics Dashboard</h5>
    <p class="mb-0">
        This dashboard demonstrates how djinsight can track and display analytics for different types of content.
        All statistics are updated in real-time using Redis and tracked automatically.
    </p>
</div>

<div class="row">
    <!-- Popular Articles -->
    <div class="col-12 mb-4">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="mb-0">📰 Most Popular Articles</h4>
            </div>
            <div class="card-body">
                {% for article in popular_articles %}
                <div class="row mb-3 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
                    <div class="col-md-8">
                        <h5>
                            <a href="{{ article.get_absolute_url }}" class="text-decoration-none">
                                {{ article.title }}
                            </a>
                        </h5>
                        <p class="text-muted mb-2">{{ article.content|truncatewords:20 }}</p>
                        <small class="text-muted">
                            By {{ article.author }} • {{ article.published_at|date:"M d, Y" }}
                        </small>
                    </div>
                    <div class="col-md-4">
                        <div class="stats-dashboard">
                            {% total_views_stat obj=article %}
                            {% unique_views_stat obj=article %}
                            {% views_today_stat obj=article %}
                            {% last_viewed_stat obj=article %}
                        </div>
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-4">
                    <p class="text-muted">No articles with views yet. <a href="/admin/">Create some articles</a> and visit them to see analytics!</p>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <!-- Popular Products -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">🛍️ Popular Products</h4>
            </div>
            <div class="card-body">
                {% for product in popular_products %}
                <div class="mb-3 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
                    <h6>
                        <a href="{{ product.get_absolute_url }}" class="text-decoration-none">
                            {{ product.name }}
                        </a>
                    </h6>
                    <p class="text-muted small mb-2">${{ product.price }} • {{ product.category }}</p>
                    
                    <div class="mini-stats">
                        {% total_views_stat obj=product %}
                        {% unique_views_stat obj=product %}
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-3">
                    <p class="text-muted small">No products with views yet.</p>
                    <a href="/admin/" class="btn btn-success btn-sm">Add Products</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <!-- Popular Courses -->
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-header bg-warning text-dark">
                <h4 class="mb-0">🎓 Popular Courses</h4>
            </div>
            <div class="card-body">
                {% for course in popular_courses %}
                <div class="mb-3 pb-3 {% if not forloop.last %}border-bottom{% endif %}">
                    <h6>
                        <a href="{{ course.get_absolute_url }}" class="text-decoration-none">
                            {{ course.title }}
                        </a>
                    </h6>
                    <p class="text-muted small mb-2">
                        {{ course.instructor }} • {{ course.difficulty|title }}
                    </p>
                    
                    <div class="mini-stats">
                        {% total_views_stat obj=course %}
                        {% unique_views_stat obj=course %}
                    </div>
                </div>
                {% empty %}
                <div class="text-center py-3">
                    <p class="text-muted small">No courses with views yet.</p>
                    <a href="/admin/" class="btn btn-warning btn-sm">Add Courses</a>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<!-- Analytics Features Demo -->
<div class="row mt-4">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h4 class="mb-0">🔧 djinsight Features Demonstrated</h4>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4">
                        <h5>Modular Components</h5>
                        <ul class="small">
                            <li><code>{% templatetag openblock %} total_views_stat {% templatetag closeblock %}</code></li>
                            <li><code>{% templatetag openblock %} unique_views_stat {% templatetag closeblock %}</code></li>
                            <li><code>{% templatetag openblock %} views_today_stat {% templatetag closeblock %}</code></li>
                            <li><code>{% templatetag openblock %} last_viewed_stat {% templatetag closeblock %}</code></li>
                            <li><code>{% templatetag openblock %} live_stats_counter {% templatetag closeblock %}</code></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h5>Automatic Tracking</h5>
                        <ul class="small">
                            <li>Page views tracked via JavaScript</li>
                            <li>Unique visitors by session</li>
                            <li>Real-time Redis storage</li>
                            <li>Background Celery processing</li>
                            <li>Multiple content types</li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <h5>Flexible Display</h5>
                        <ul class="small">
                            <li>Individual stat components</li>
                            <li>Custom layouts and styling</li>
                            <li>Live auto-refresh counters</li>
                            <li>Number formatting (1.2K, 3.4M)</li>
                            <li>Responsive design ready</li>
                        </ul>
                    </div>
                </div>
                
                <div class="mt-3 p-3 bg-light rounded">
                    <h6>🎯 Quick Start:</h6>
                    <ol class="small mb-0">
                        <li>Add <code>PageViewStatisticsMixin</code> to your model</li>
                        <li>Include <code>{% templatetag openblock %} page_view_tracker {% templatetag closeblock %}</code> in templates</li>
                        <li>Use any combination of stat components: <code>{% templatetag openblock %} total_views_stat {% templatetag closeblock %}</code>, etc.</li>
                        <li>Style with CSS classes: <code>.djinsight-stat-item</code>, <code>.djinsight-stat-value</code></li>
                    </ol>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

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

.mini-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.stats-dashboard .djinsight-stat-item {
    margin-bottom: 0.25rem;
    padding: 0.5rem;
}

.mini-stats .djinsight-stat-item {
    margin-bottom: 0;
    padding: 0.25rem 0.5rem;
    border-left-width: 2px;
}
</style>
{% endblock %} 