{% extends 'shared/partials/base_card.html' %}
{% load static %}

{% block image_overlay %}
    {% if platform %}
        <span class="platform-tag position-absolute top-0 end-0 m-2 px-3 py-1 bg-primary text-white rounded-pill small shadow-sm" style="z-index:2; font-weight:600; letter-spacing:0.5px;">{{ platform }}</span>
    {% endif %}
    <!-- Status Badge -->
    {% if equipment.status == 'available' %}
        <span class="position-absolute top-3 end-3 z-2 badge bg-success bg-opacity-90 text-white">
            <i class="fas fa-check-circle me-1"></i>
            Available
        </span>
    {% else %}
        <span class="position-absolute top-3 end-3 z-2 badge bg-secondary bg-opacity-90 text-white">
            <i class="fas fa-clock me-1"></i>
            {{ equipment.get_status_display|default:'Unavailable' }}
        </span>
    {% endif %}
    
    <!-- Favorite Button -->
    {% if request.user.is_authenticated %}
    <button class="favorite-btn position-absolute top-3 start-3 z-2"
            hx-post="{% url 'equipment:toggle_favorite' equipment.id %}"
            hx-swap="outerHTML"
            hx-target="closest .equipment-card"
            hx-indicator="#favorite-indicator-{{ equipment.id }}"
            data-bs-toggle="tooltip"
            data-bs-placement="left"
            {% if equipment in request.user.favorite_equipment.all %}title="Remove from favorites"{% else %}title="Add to favorites"{% endif %}
            aria-pressed="{% if equipment in request.user.favorite_equipment.all %}true{% else %}false{% endif %}"
            aria-label="{% if equipment in request.user.favorite_equipment.all %}Remove from{% else %}Add to{% endif %} favorites">
        <span class="position-relative">
            {% if equipment in request.user.favorite_equipment.all %}
                <i class="fas fa-heart text-danger"></i>
            {% else %}
                <i class="far fa-heart text-danger"></i>
            {% endif %}
            <span id="favorite-indicator-{{ equipment.id }}" 
                  class="htmx-indicator position-absolute top-50 start-50 translate-middle">
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                <span class="visually-hidden">Loading...</span>
            </span>
        </span>
    </button>
    {% endif %}
    
    <!-- Owner Badge -->
    {% if equipment.owner %}
        <div class="position-absolute bottom-3 start-3 z-2 d-flex align-items-center">
            <div class="position-relative me-2">
                {% if equipment.owner.profile_picture %}
                    <img src="{{ equipment.owner.profile_picture.url }}" 
                         alt="{{ equipment.owner.get_full_name|default:equipment.owner.username }}" 
                         class="provider-avatar rounded-circle"
                         loading="lazy"
                         width="32"
                         height="32">
                {% else %}
                    <div class="provider-avatar-placeholder rounded-circle" 
                         role="img" 
                         aria-label="{{ equipment.owner.get_full_name|default:equipment.owner.username }}'s profile picture">
                        <i class="fas fa-user text-primary"></i>
                    </div>
                {% endif %}
                {% if equipment.owner.is_verified %}
                    <span class="position-absolute bottom-0 end-0 bg-success rounded-circle p-1 border border-2 border-white"
                          data-bs-toggle="tooltip" 
                          title="Verified Owner"
                          aria-label="Verified Owner">
                        <i class="fas fa-check text-white" style="font-size: 0.6rem;"></i>
                    </span>
                {% endif %}
            </div>
            <span class="badge bg-dark bg-opacity-75 text-white px-2 py-1">
                {{ equipment.owner.get_full_name|default:equipment.owner.username }}
            </span>
        </div>
    {% else %}
        <span class="position-absolute bottom-3 start-3 z-2 badge bg-primary bg-opacity-90 text-white px-3 py-1">
            <i class="fas fa-shield-alt me-1"></i>
            PRACA Verified
        </span>
    {% endif %}
    
    <!-- Condition Badge -->
    {% if equipment.condition %}
    <span class="position-absolute bottom-3 end-3 z-2 badge bg-{{ equipment.condition|default:'info' }} bg-opacity-90 text-white">
        <i class="fas fa-{{ equipment.condition_icon }} me-1"></i>
        {{ equipment.get_condition_display|default:equipment.condition|title }}
    </span>
    {% endif %}
    
    <!-- Discount Badge -->
    {% if equipment.discount %}
        <span class="position-absolute top-3 start-1/2 translate-middle-x z-2 badge bg-danger bg-opacity-90 text-white">
            {{ equipment.discount }}% OFF
        </span>
    {% endif %}
{% endblock %}
        
{% block card_body %}
    <!-- Category -->
    <div class="mb-2">
        <span class="badge bg-light text-primary border border-primary-subtle">
            <i class="fas fa-{{ equipment.category_icon|default:'box' }} me-1"></i>
            {{ equipment.category }}
        </span>
    </div>
    
    <!-- Title -->
    <h3 class="h5 card-title mb-2">
        <a href="{{ equipment.get_absolute_url }}" 
           class="text-dark text-decoration-none hover-text-primary"
           aria-label="View {{ equipment.name }} details">
            {{ equipment.name }}
        </a>
    </h3>
    
    <!-- Brand and Model -->
    <p class="text-muted small mb-3">
        <span class="d-block">{{ equipment.brand }}</span>
        <span class="text-muted small">{{ equipment.model }}</span>
    </p>
    
    <!-- Features -->
    <div class="equipment-features mb-3">
        {% if equipment.features %}
            <div class="d-flex flex-wrap gap-2">
                {% for feature in equipment.features|slice:":3" %}
                    <span class="badge bg-light text-muted border" data-bs-toggle="tooltip" title="{{ feature }}">
                        <i class="fas fa-check-circle text-success me-1"></i>
                        {{ feature|truncatechars:15 }}
                    </span>
                {% endfor %}
                {% if equipment.features|length > 3 %}
                    <span class="badge bg-light text-muted border">
                        +{{ equipment.features|slice:"3:"|length }} more
                    </span>
                {% endif %}
            </div>
        {% endif %}
    </div>
    
    <!-- Rating and Price -->
    <div class="mt-auto">
        <div class="d-flex justify-content-between align-items-center mb-3">
            <div>
                {% include 'shared/partials/rating.html' with 
                    rating=equipment.average_rating|default:0 
                    count=equipment.review_count|default:0 
                    show_count=True 
                    size="sm"
                    aria_label=equipment.name|add:" rating" %}
            </div>
            <div class="text-end">
                {% if equipment.discount %}
                    <span class="text-muted text-decoration-line-through me-1 small">
                        Ksh {{ equipment.original_price|floatformat:2 }}
                    </span>
                {% endif %}
                <div class="h5 mb-0 text-primary">
                    Ksh {{ equipment.daily_rate|floatformat:2 }}
                    <small class="text-muted">/day</small>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block card_footer %}
    <div class="card-footer bg-transparent border-top-0 pt-0">
        <div class="d-grid">
            <a href="{{ equipment.get_absolute_url }}" 
               class="btn btn-primary d-flex align-items-center justify-content-center"
               aria-label="View {{ equipment.name }} details">
                <span>View Details</span>
                <i class="fas fa-arrow-right ms-2" aria-hidden="true"></i>
            </a>
        </div>
    </div>
{% endblock %}

{% block extra_css %}
<style>
    .equipment-card {
        --card-height: 380px;
    }
    
    .equipment-features .badge {
        font-weight: normal;
        padding: 0.35em 0.65em;
    }
    
    .hover-text-primary:hover {
        color: var(--bs-primary) !important;
    }
    
    /* Responsive adjustments */
    @media (max-width: 767.98px) {
        .equipment-card {
            --card-height: auto;
        }
    }
</style>
{% endblock %}

{% block extra_js %}
{{ block.super }}
<script>
    // Initialize tooltips
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize Bootstrap tooltips
        var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
        var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
            return new bootstrap.Tooltip(tooltipTriggerEl, {
                trigger: 'hover focus'
            });
        });
        
        // Add loading state to favorite button
        document.querySelectorAll('.favorite-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                this.closest('.equipment-card').classList.add('is-loading');
                // Remove loading state after HTMX completes
                this.addEventListener('htmx:afterSwap', function() {
                    this.closest('.equipment-card').classList.remove('is-loading');
                }, { once: true });
            });
        });
    });
</script>
{% endblock %}