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

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

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

<div class="row">
    {% for course in courses %}
    <div class="col-md-6 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{ course.get_absolute_url }}" class="text-decoration-none">
                        {{ course.title }}
                    </a>
                </h5>
                <p class="card-text">{{ course.description|truncatewords:15 }}</p>
                
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <div>
                        <span class="badge bg-warning text-dark">{{ course.difficulty|title }}</span>
                        <small class="text-muted ms-2">by {{ course.instructor }}</small>
                    </div>
                </div>
                
                <div class="stats-mini d-flex gap-2 flex-wrap">
                    {% total_views_stat obj=course %}
                    {% unique_views_stat obj=course %}
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info text-center">
            <h4>No courses yet!</h4>
            <p>Visit the <a href="/admin/">admin panel</a> to create some courses.</p>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if is_paginated %}
<nav aria-label="Courses pagination">
    <ul class="pagination justify-content-center">
        {% if page_obj.has_previous %}
            <li class="page-item">
                <a class="page-link" href="?page=1">First</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.previous_page_number }}">Previous</a>
            </li>
        {% endif %}
        
        <li class="page-item active">
            <span class="page-link">
                Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}
            </span>
        </li>
        
        {% if page_obj.has_next %}
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.next_page_number }}">Next</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}">Last</a>
            </li>
        {% endif %}
    </ul>
</nav>
{% endif %}
{% endblock %} 