{% load static %}
{% if related_equipment %}
<div class="related-equipment mt-5">
    <h4 class="mb-4">You May Also Like</h4>
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-4 g-4">
        {% for item in related_equipment %}
        <div class="col">
            <div class="card h-100">
                <div class="position-relative">
                    {% if item.main_image %}
                        <img src="{{ item.main_image.url }}" 
                             class="card-img-top equipment-image" 
                             alt="{{ item.name }}" 
                             style="height: 180px; object-fit: cover;"
                             data-fallback-src="{% static 'img/placeholder-equipment.svg' %}">
                    {% else %}
                        <div class="bg-light d-flex align-items-center justify-content-center" style="height: 180px;">
                            <img src="{% static 'img/placeholder-equipment.svg' %}" 
                                 class="card-img-top" 
                                 style="height: 180px; width: 100%; object-fit: contain;"
                                 alt="No image available">
                        </div>
                    {% endif %}
                    <span class="badge bg-primary position-absolute top-0 start-0 m-2">{{ item.category.name }}</span>
                </div>
                <div class="card-body d-flex flex-column">
                    <h5 class="card-title mb-1">{{ item.name }}</h5>
                    <p class="text-muted small mb-2">{% if item.equipment_model %}{{ item.equipment_model.make.name }} {{ item.equipment_model.name }}{% endif %}</p>
                    <div class="d-flex align-items-center mb-2">
                        <div class="text-warning me-2">
                            {% with ''|center:5 as range %}
                                {% for _ in range %}
                                    <i class="fas fa-star{% if forloop.counter > 4.5 %}-half-alt{% endif %}"></i>
                                {% endfor %}
                            {% endwith %}
                            <span class="ms-1 small text-muted">4.8</span>
                        </div>
                    </div>
                    <div class="mt-auto">
                        <div class="d-flex justify-content-between align-items-center">
                            <span class="h5 mb-0">KSh {{ item.daily_rate|floatformat:0 }}/day</span>
                            <a href="{% url 'equipment:detail' slug=item.slug %}" class="btn btn-sm btn-outline-primary">
                                View
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endif %}

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