{% for item in items %}
<div class="product-card-wrapper">
    <!-- Suggestion Text on Hover (outside the card) -->
    <div class="hover-suggestion">
        {% if item.is_safe %}
            <p>Click to show why it is safe</p>
        {% else %}
            <p>Click to show alternative products</p>
        {% endif %}
    </div>

    <div class="product-card" id="product-card-{{ item.id }}">
        <!-- Three Dot Icon for Edit -->
        <div class="three-dot-menu" onclick="toggleMenu({{ item.id }})">
            <i class="fas fa-ellipsis-h"></i>
            <div id="menu-{{ item.id }}" class="dropdown-menu">
                <a href="{% url 'edit_item' item.id %}" class="edit-item-link">Edit Item</a>
            </div>
        </div>

        <a href="{% url 'item_detail' item.id %}" class="item-link">
            {% if item.logo %}
                <img src="{{ item.logo.url }}" alt="{{ item.name }}" class="item-logo">
            {% else %}
                <div class="item-logo placeholder-logo">No Image</div>
            {% endif %}

            <!-- Safe/Unsafe Status moved to left top -->
            <div class="item-status">
                {% if item.is_safe %}
                    <span class="safe-icon">✅</span>
                {% else %}
                    <span class="unsafe-icon">❌</span>
                {% endif %}
            </div>

            <div class="product-details">
                <h3>{{ item.name }}</h3>
                <p class="item-description"><strong>Description:</strong> {{ item.description|truncatechars:100 }}</p>
                <p class="item-reason"><strong>Reason:</strong> {{ item.reason_for_boycott|truncatechars:80 }}</p>
                <a href="{{ item.source }}" target="_blank" class="source-link">Source 🔗</a>
            </div>

            <div>
                {% if item.is_safe %}
                    <span class="safe-text">এটা ব্যবহার করতে সমস্যা নেই!</span>
                {% elif not item.is_safe %}
                    <span class="unsafe-text">এটা বয়কট করা উচিত!</span>
                {% endif %}
            </div>
        </a>
    </div>
</div>
{% empty %}
    <p>Sorry, no items found. We are working on adding more items.</p>
{% endfor %}

<style>
    /* Wrapper around the product card */
    .product-card-wrapper {
        position: relative;
        margin: 20px auto;
        width: 320px;
    }
    
    /* Hover Suggestion Text (Positioned above the card) */
    .hover-suggestion {
        position: absolute;
        top: -120px;  /* Move it 20px above the card */
        left: 50%;
        transform: translateX(-50%);
        font-size: 16px;
        color: #333;
        background-color: #f0f0f0;  /* Light gray background */
        padding: 5px 10px;
        border-radius: 5px;
        display: none; /* Initially hidden */
        z-index: 2;
    }
    
    /* Show suggestion on hover over the product card wrapper */
    .product-card-wrapper:hover .hover-suggestion {
        display: block; /* Show on hover */
    }
    
    /* Product Card Styling */
    .product-card {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        padding: 20px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.3s ease-in-out;
        width: 100%; /* Full width inside wrapper */
        margin: 0 auto;
        position: relative; /* To position the status icon */
    }
    
    /* Three Dot Menu */
    .three-dot-menu {
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        z-index: 2;
    }
    
    .three-dot-menu i {
        font-size: 24px;
        color: #333;
    }
    
    /* Dropdown Menu */
    .dropdown-menu {
        display: none;
        position: absolute;
        top: 30px;
        right: 0;
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 5px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        width: 150px;
        padding: 10px 0;
    }
    
    .dropdown-menu a {
        color: #007bff;
        padding: 10px 15px;
        display: block;
        text-decoration: none;
    }
    
    .dropdown-menu a:hover {
        background-color: #f1f1f1;
    }
    
    /* Safe/Unsafe Status moved to left top */
    .item-status {
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 24px;
        z-index: 1;
    }
    
    .safe-icon {
        color: green;
    }
    
    .unsafe-icon {
        color: red;
    }
    
    /* Product Logo */
    .item-logo {
        width: 120px;
        height: 120px;
        object-fit: contain;
        border-radius: 8px;
        margin-bottom: 15px;
        background-color: #f9f9f9;
        border: 1px solid #ddd;
        transition: transform 0.3s;
    }
    
    .placeholder-logo {
        width: 120px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #f3f3f3;
        color: #888;
        font-size: 14px;
        border-radius: 8px;
        margin-bottom: 15px;
        border: 1px solid #ddd;
    }
    
    /* Product Details */
    .product-details {
        text-align: center;
        color: #333;
        width: 100%;
    }
    
    .product-details h3 {
        margin: 0 0 10px 0;
        font-size: 18px;
        font-weight: bold;
        color: #333;
    }
    
    .item-description, .item-reason {
        font-size: 14px;
        color: #555;
        margin-bottom: 10px;
        text-align: left;
    }
    
    .item-description strong, .item-reason strong {
        color: #007bff;
    }
    
    .source-link {
        margin-top: 15px;
        color: #007bff;
        font-size: 14px;
        font-weight: 600;
    }
    
    /* Remove underlines from all links */
    a {
        text-decoration: none;
    }
    
    a:hover {
        text-decoration: none;
    }
    
    .source-link:hover {
        text-decoration: none;
    }
    
    /* Responsive Design */
    @media screen and (max-width: 768px) {
        .product-card {
            width: 280px;
            padding: 15px;
        }
    
        .item-logo {
            width: 100px;
            height: 100px;
        }
    
        .product-details h3 {
            font-size: 16px;
        }
    
        .item-description, .item-reason {
            font-size: 13px;
        }
    }
    
</style>

<script>
    function toggleMenu(itemId) {
        console.log("Menu toggled for item " + itemId);  // Check if this is triggered
        var menu = document.getElementById('menu-' + itemId);
        if (menu.style.display === "block") {
            menu.style.display = "none";  // Hide if visible
        } else {
            menu.style.display = "block";  // Show the menu
        }
    }

    // Close the menu if clicked outside
    document.addEventListener('click', function(event) {
        var isClickInside = event.target.closest('.three-dot-menu');
        if (!isClickInside) {
            var menus = document.querySelectorAll('.dropdown-menu');
            menus.forEach(function(menu) {
                menu.style.display = "none";  // Hide all dropdowns if clicked outside
            });
        }
    });
</script>