{# Favorite button component that can be used across different card types #}
{% load static %}

<button 
    class="btn btn-icon btn-light rounded-circle position-absolute top-0 start-0 m-2 favorite-btn" 
    data-entity-type="{{ entity_type|default:'equipment' }}"
    data-entity-id="{{ entity_id }}"
    data-bs-toggle="tooltip" 
    data-bs-placement="top" 
    title="{% if user.is_authenticated %}Add to favorites{% else %}Login to add to favorites{% endif %}"
    {% if not user.is_authenticated %}disabled{% endif %}
    style="width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;"
>
    <i class="far fa-heart text-danger"></i>
</button>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize tooltips
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl);
    });
    
    // Handle favorite button clicks
    document.querySelectorAll('.favorite-btn').forEach(button => {
        button.addEventListener('click', function(e) {
            e.preventDefault();
            const entityId = this.dataset.entityId;
            const entityType = this.dataset.entityType;
            
            // Toggle favorite state
            fetch(`/api/${entityType}/${entityId}/favorite/`, {
                method: 'POST',
                headers: {
                    'X-CSRFToken': '{{ csrf_token }}',
                    'Content-Type': 'application/json',
                },
                credentials: 'same-origin'
            })
            .then(response => response.json())
            .then(data => {
                const icon = this.querySelector('i');
                if (data.is_favorite) {
                    icon.classList.remove('far');
                    icon.classList.add('fas');
                    this.setAttribute('title', 'Remove from favorites');
                } else {
                    icon.classList.remove('fas');
                    icon.classList.add('far');
                    this.setAttribute('title', 'Add to favorites');
                }
                // Update the tooltip title
                const tooltip = bootstrap.Tooltip.getInstance(this);
                tooltip.setContent({'.tooltip-inner': this.getAttribute('title')});
            });
        });
    });
});
</script>