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

{% block title %}Home - djinsight Example{% endblock %}

{% block content %}
<div class="jumbotron bg-primary text-white rounded p-5 mb-4">
    <h1 class="display-4">Welcome to djinsight Demo!</h1>
    <p class="lead">
        This is a demonstration of the djinsight package - a high-performance Django analytics system.
        Browse articles, products, and courses to see live view tracking in action!
    </p>
    <a class="btn btn-light btn-lg" href="{% url 'popular' %}" role="button">📊 View Analytics Dashboard</a>
</div>

<div class="row">
    <div class="col-md-8">
        <h2>Latest Articles</h2>
        <p class="text-muted">Each article tracks views automatically using djinsight</p>
        
        {% for article in articles %}
        <div class="card mb-3">
            <div class="card-body">
                <div class="d-flex justify-content-between align-items-start">
                    <div class="flex-grow-1">
                        <h5 class="card-title">
                            <a href="{{ article.get_absolute_url }}" class="text-decoration-none">
                                {{ article.title }}
                            </a>
                        </h5>
                        <p class="card-text">{{ article.content|truncatewords:20 }}</p>
                        <small class="text-muted">
                            By {{ article.author }} on {{ article.published_at|date:"M d, Y" }}
                        </small>
                    </div>
                    
                    <div class="ms-3 text-end">
                        {% if article.total_views > 0 %}
                            <div class="popularity-badge">
                                🔥 {{ article.total_views|format_view_count }} views
                            </div>
                        {% endif %}
                        
                        <div class="stats-mini">
                            {% total_views_stat obj=article %}
                            {% if article.unique_views > 0 %}
                                {% unique_views_stat obj=article %}
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% empty %}
        <div class="alert alert-info">
            <h5>No articles yet!</h5>
            <p>Visit the <a href="/admin/">admin panel</a> to create some sample articles.</p>
        </div>
        {% endfor %}
        
        <div class="text-center">
            <a href="{% url 'article_list' %}" class="btn btn-primary">View All Articles</a>
        </div>
    </div>
    
    <div class="col-md-4">
        <div class="card mb-4">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">🛍️ Popular Products</h5>
            </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>
                    <div class="small text-muted">
                        ${{ product.price }}
                        {% if product.total_views > 0 %}
                        • {{ product.total_views|format_view_count }} views
                        {% endif %}
                    </div>
                    {% if product.total_views > 0 %}
                        {% total_views_stat obj=product %}
                    {% endif %}
                </div>
                {% empty %}
                <p class="text-muted">No products yet. <a href="/admin/">Add some products</a> to see analytics!</p>
                {% endfor %}
                
                {% if popular_products %}
                <a href="{% url 'product_list' %}" class="btn btn-success btn-sm">View All Products</a>
                {% endif %}
            </div>
        </div>
        
        <div class="card">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">🎓 Popular Courses</h5>
            </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>
                    <div class="small text-muted">
                        by {{ course.instructor }}
                        {% if course.total_views > 0 %}
                        • {{ course.total_views|format_view_count }} views
                        {% endif %}
                    </div>
                    {% if course.total_views > 0 %}
                        {% total_views_stat obj=course %}
                    {% endif %}
                </div>
                {% empty %}
                <p class="text-muted">No courses yet. <a href="/admin/">Add some courses</a> to see analytics!</p>
                {% endfor %}
                
                {% if popular_courses %}
                <a href="{% url 'course_list' %}" class="btn btn-warning btn-sm">View All Courses</a>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-4">
    <div class="col-12">
        <div class="alert alert-info">
            <h5>🚀 djinsight Features Demonstrated</h5>
            <ul class="mb-0">
                <li><strong>Automatic View Tracking:</strong> Every page view is tracked automatically</li>
                <li><strong>Modular Template Tags:</strong> Mix and match statistics components</li>
                <li><strong>Multiple Content Types:</strong> Works with Articles, Products, Courses, and any Django model</li>
                <li><strong>Live Statistics:</strong> Real-time view counts with Redis backend</li>
                <li><strong>Popular Content Detection:</strong> Automatically highlights trending content</li>
            </ul>
        </div>
    </div>
</div>
{% endblock %} 