components/popup_card.py

from utils.data_loader import load_nutrition_data

def show_popup_card(selected_item):
    # Fetch nutrition data
    nutrition = load_nutrition_data(selected_item)
    if not nutrition:
        return f"<div class='popup-card'>No details available for {selected_item}</div>"
    
    # Construct HTML for the popup card
    return f"""
        <div class='popup-card'>
            <button class='close-icon' onclick='document.getElementById("popup-container").innerHTML=""'>X</button>
            <img src='assets/food_images/{nutrition["image"]}' alt='{selected_item}' />
            <h3>{selected_item}</h3>
            <div class='nutrition'>
                <h4>Nutrition Details:</h4>
                <p><b>Calories:</b> {nutrition["calories"]}</p>
                <p><b>Proteins:</b> {nutrition["proteins"]}g</p>
                <p><b>Carbohydrates:</b> {nutrition["carbohydrates"]}g</p>
                <p><b>Fat:</b> {nutrition["fat"]}g</p>
            </div>
        </div>
    """