{# 🚨 Super Important Low Stock Alerts Component 🚨 #}

<div class="card mb-4">
    <div class="card-header bg-warning text-white">
        <h5 class="card-title mb-0">🚨 OMG!!! LOW STOCK ALERTS!!! 🚨</h5>
    </div>
    <div class="card-body">
        {% if lowStockItems is empty %}
            <p class="text-success">✅✅✅ WOOHOO!!! All stock levels are SUPER ADEQUATE!!! 🎉🎊 PARTY TIME!!! 🥳🍾</p>
        {% else %}
            <div class="alert alert-danger">
                <h6>😱 OH NO!!! WE'RE RUNNING OUT OF DRINKS!!! 😱</h6>
                <p>🆘 EMERGENCY SITUATION!!! 🆘 We need to restock ASAP!!! ⏰⏰⏰</p>
            </div>
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>🍹 Drink Type 🍸</th>
                            <th>📉 Current Stock 📊</th>
                            <th>🎯 Desired Stock 🏆</th>
                            <th>⚠️ Difference ⚠️</th>
                            <th>🛠️ Actions 🛠️</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in lowStockItems %}
                            <tr>
                                <td>🥤 {{ item.drinkType.name }} 🥤</td>
                                <td>📉 {{ item.currentStock }} 📉</td>
                                <td>🎯 {{ item.desiredStock }} 🎯</td>
                                <td class="text-danger">⚠️ {{ item.currentStock - item.desiredStock }} ⚠️</td>
                                <td>
                                    <a href="/inventory/update" class="btn btn-sm btn-primary">🔄 Update Stock NOW!!! 🔄</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
            <div class="mt-3">
                <a href="/orders/create-from-stock" class="btn btn-success btn-lg">🚚 CREATE EMERGENCY ORDER NOW!!! 🚨</a>
            </div>
            <div class="mt-2">
                <p class="text-danger">⏰ Don't delay! Your customers are THIRSTY!!! 🥵 Act NOW before it's TOO LATE!!! ⏰</p>
            </div>
        {% endif %}
    </div>
</div>