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

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

{% block content %}
<div class="row">
    <div class="col-md-8">
        <div class="course-header mb-4">
            <h1>{{ course.title }}</h1>
            <div class="d-flex justify-content-between align-items-center mb-3">
                <div>
                    <span class="badge bg-warning text-dark">{{ course.difficulty|title }}</span>
                    <span class="text-muted ms-3">by {{ course.instructor }}</span>
                </div>
                {% if course.total_views > 0 %}
                <div class="popularity-badge">
                    🔥 {{ course.total_views|format_view_count }} views
                </div>
                {% endif %}
            </div>
        </div>
        
        <div class="course-description mb-4">
            {{ course.description|linebreaks }}
        </div>
        
        <!-- djinsight Course Analytics Demo -->
        <div class="analytics-demo mt-5">
            <h3>📊 Course Analytics Demo</h3>
            <p class="text-muted">
                This section demonstrates how djinsight can track course engagement and student interest.
            </p>
            
            <div class="row mb-4">
                <div class="col-md-6">
                    <h5>Course Popularity</h5>
                    <div class="stats-grid">
                        {% total_views_stat obj=course %}
                        {% unique_views_stat obj=course %}
                        {% views_today_stat obj=course %}
                    </div>
                </div>
                
                <div class="col-md-6">
                    <h5>Student Engagement</h5>
                    <div class="stats-grid">
                        {% first_viewed_stat obj=course %}
                        {% last_viewed_stat obj=course %}
                        {% views_week_stat obj=course %}
                    </div>
                </div>
            </div>
            
            <!-- Live Course Analytics -->
            <div class="mb-4">
                <h5>Live Course Analytics</h5>
                {% live_stats_counter obj=course show_unique=True refresh_interval=20 %}
            </div>
            
            <!-- Educational Analytics Widget -->
            <div class="mb-4">
                <h5>Educational Analytics Widget</h5>
                {% page_analytics_widget obj=course period='week' %}
            </div>
        </div>
        
        <div class="mt-4">
            <a href="{% url 'course_list' %}" class="btn btn-secondary">← Back to Courses</a>
            <a href="{% url 'home' %}" class="btn btn-primary">Home</a>
        </div>
    </div>
    
    <div class="col-md-4">
        <!-- Course Info Sidebar -->
        <div class="card mb-4">
            <div class="card-header bg-warning text-dark">
                <h5 class="mb-0">🎓 Course Info</h5>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <strong>Instructor:</strong> {{ course.instructor }}
                </div>
                <div class="mb-3">
                    <strong>Difficulty:</strong> 
                    <span class="badge bg-warning text-dark">{{ course.difficulty|title }}</span>
                </div>
                <div class="mb-3">
                    <strong>Created:</strong> {{ course.created_at|date:"M d, Y" }}
                </div>
                
                <hr>
                
                <h6>Engagement Statistics:</h6>
                {% total_views_stat obj=course %}
                {% unique_views_stat obj=course %}
                {% if course.last_viewed_at %}
                    {% last_viewed_stat obj=course %}
                {% endif %}
            </div>
        </div>
        
        <!-- Educational Features -->
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">🚀 Educational Features</h5>
            </div>
            <div class="card-body">
                <ul class="small">
                    <li>Course engagement tracking</li>
                    <li>Student interest analytics</li>
                    <li>Popular course detection</li>
                    <li>Learning path optimization</li>
                    <li>Instructor insights</li>
                </ul>
                
                <div class="mt-3">
                    <strong>Template Tags Used:</strong>
                    <pre class="small bg-light p-2 rounded mt-2"><code>{% templatetag openblock %} total_views_stat obj=course {% templatetag closeblock %}
{% templatetag openblock %} unique_views_stat obj=course {% templatetag closeblock %}
{% templatetag openblock %} live_stats_counter obj=course {% templatetag closeblock %}</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Track this course view -->
{% page_view_tracker obj=course debug=True %}
{% endblock %} 