{% extends 'base/base.html' %}
{% load static %}

{% block title %}{{ category.name }} - PRACA Equipment Rental{% endblock %}

{% block content %}
<div class="container py-5">
    <!-- Category Header -->
    <div class="row mb-4">
        <div class="col-12">
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb">
                    <li class="breadcrumb-item"><a href="{% url 'equipment:home' %}">Home</a></li>
                    <!-- Removed Equipment breadcrumb item to simplify navigation -->
                    <li class="breadcrumb-item active" aria-current="page">{{ category.name }}</li>
                </ol>
            </nav>
            <h1 class="h2 mb-3">{{ category.name }}</h1>
            {% if category.description %}
                <p class="lead">{{ category.description }}</p>
            {% endif %}
        </div>
    </div>

    <!-- Filters -->
    <div class="card mb-4">
        <div class="card-body">
            <form method="get" class="row g-3">
                <div class="col-md-4">
                    <label for="price_min" class="form-label">Min Price (KSh)</label>
                    <input type="number" class="form-control" id="price_min" name="price_min" 
                           value="{{ request.GET.price_min }}" min="0" step="100">
                </div>
                <div class="col-md-4">
                    <label for="price_max" class="form-label">Max Price (KSh)</label>
                    <input type="number" class="form-control" id="price_max" name="price_max" 
                           value="{{ request.GET.price_max }}" min="0" step="100">
                </div>
                <div class="col-md-4 d-flex align-items-end">
                    <button type="submit" class="btn btn-primary me-2">
                        <i class="fas fa-filter me-1"></i> Apply Filters
                    </button>
                    <a href="{% url 'equipment:category_detail' slug=category.slug %}" class="btn btn-outline-secondary">
                        <i class="fas fa-sync-alt me-1"></i> Reset
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Equipment Grid -->
    {% if equipment %}
        <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4 mb-4">
            {% for item in equipment %}
                <div class="col">
                    <div class="card h-100 shadow-sm">
                        {% if item.main_image %}
                            <img src="{{ item.main_image.url }}" 
                                 class="card-img-top equipment-image" 
                                 alt="{{ item.name }}" 
                                 style="height: 200px; object-fit: cover;"
                                 data-fallback-src="{% static 'img/placeholder-equipment.jpg' %}">
                        {% else %}
                            <div class="bg-light d-flex align-items-center justify-content-center" style="height: 200px;">
                                <img src="{% static 'img/placeholder-equipment.jpg' %}" class="card-img-top" alt="No image available" style="height: 200px; object-fit: cover;">
                            </div>
                        {% endif %}
                        <div class="card-body">
                            <h5 class="card-title">
                                <a href="{% url 'equipment:detail' slug=item.slug %}" class="text-decoration-none text-dark">
                                    {{ item.name }}
                                </a>
                            </h5>
                            <p class="card-text text-muted small mb-2">{% if item.equipment_model %}{{ item.equipment_model.make.name }} {{ item.equipment_model.name }}{% endif %}</p>
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <span class="h5 mb-0">KSh {{ item.daily_rate|floatformat:2 }}</span>
                                    <span class="text-muted small">/day</span>
                                </div>
                                <div class="text-end">
                                    {% if item.is_available %}
                                        <span class="badge bg-success">Available</span>
                                    {% else %}
                                        <span class="badge bg-secondary">Unavailable</span>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                        <div class="card-footer bg-white">
                            <a href="{% url 'equipment:detail' slug=item.slug %}" class="btn btn-outline-primary w-100">
                                <i class="fas fa-info-circle me-1"></i> View Details
                            </a>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- Pagination -->
        {% if is_paginated %}
            <nav aria-label="Page navigation">
                <ul class="pagination justify-content-center">
                    {% if page_obj.has_previous %}
                        <li class="page-item">
                            <a class="page-link" href="?page=1{% if request.GET.price_min %}&price_min={{ request.GET.price_min }}{% endif %}{% if request.GET.price_max %}&price_max={{ request.GET.price_max }}{% endif %}" aria-label="First">
                                <span aria-hidden="true">&laquo;&laquo;</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.previous_page_number }}{% if request.GET.price_min %}&price_min={{ request.GET.price_min }}{% endif %}{% if request.GET.price_max %}&price_max={{ request.GET.price_max }}{% endif %}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                    {% endif %}

                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <li class="page-item active">
                                <span class="page-link">{{ num }}</span>
                            </li>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <li class="page-item">
                                <a class="page-link" href="?page={{ num }}{% if request.GET.price_min %}&price_min={{ request.GET.price_min }}{% endif %}{% if request.GET.price_max %}&price_max={{ request.GET.price_max }}{% endif %}">
                                    {{ num }}
                                </a>
                            </li>
                        {% endif %}
                    {% endfor %}

                    {% if page_obj.has_next %}
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.next_page_number }}{% if request.GET.price_min %}&price_min={{ request.GET.price_min }}{% endif %}{% if request.GET.price_max %}&price_max={{ request.GET.price_max }}{% endif %}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        <li class="page-item">
                            <a class="page-link" href="?page={{ page_obj.paginator.num_pages }}{% if request.GET.price_min %}&price_min={{ request.GET.price_min }}{% endif %}{% if request.GET.price_max %}&price_max={{ request.GET.price_max }}{% endif %}" aria-label="Last">
                                <span aria-hidden="true">&raquo;&raquo;</span>
                            </a>
                        </li>
                    {% endif %}
                </ul>
            </nav>
        {% endif %}
    {% else %}
        <div class="text-center py-5">
            <div class="mb-4">
                <i class="fas fa-search fa-4x text-muted mb-3"></i>
                <h3>No equipment found</h3>
                <p class="text-muted">
                    {% if request.GET.price_min or request.GET.price_max %}
                        No equipment matches your filter criteria. Try adjusting your filters.
                    {% else %}
                        No equipment is currently available in this category. Please check back later.
                    {% endif %}
                </p>
                <a href="{% url 'equipment:list' %}" class="btn btn-primary mt-3">
                    <i class="fas fa-arrow-left me-1"></i> Back to All Equipment
                </a>
            </div>
        </div>
    {% endif %}
</div>
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle image loading errors
    document.querySelectorAll('.equipment-image').forEach(function(img) {
        img.addEventListener('error', function() {
            const fallbackSrc = this.getAttribute('data-fallback-src');
            if (fallbackSrc && this.src !== fallbackSrc) {
                this.src = fallbackSrc;
            }
        });
    });
});
</script>
{% endblock %}

{% block extra_css %}
<style>
    .card {
        transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }
    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
    .breadcrumb {
        background-color: transparent;
        padding: 0.5rem 0;
    }
    .breadcrumb-item + .breadcrumb-item::before {
        content: ">";
    }
</style>
{% endblock %}