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

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

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

<div class="row">
    {% for product in products %}
    <div class="col-md-4 mb-4">
        <div class="card h-100">
            <div class="card-body">
                <h5 class="card-title">
                    <a href="{{ product.get_absolute_url }}" class="text-decoration-none">
                        {{ product.name }}
                    </a>
                </h5>
                <p class="card-text">{{ product.description|truncatewords:15 }}</p>
                
                <div class="d-flex justify-content-between align-items-center mb-3">
                    <span class="badge bg-secondary">{{ product.category }}</span>
                    <span class="text-success fw-bold">${{ product.price }}</span>
                </div>
                
                <div class="stats-mini d-flex gap-2 flex-wrap">
                    {% total_views_stat obj=product %}
                    {% unique_views_stat obj=product %}
                </div>
            </div>
        </div>
    </div>
    {% empty %}
    <div class="col-12">
        <div class="alert alert-info text-center">
            <h4>No products yet!</h4>
            <p>Visit the <a href="/admin/">admin panel</a> to create some products.</p>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Pagination -->
{% if is_paginated %}
<nav aria-label="Products 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 %} 