{% if low_stock or expiring or expired %}
    <!-- Low Stock Items -->
    {% if low_stock %}
    <div class="mb-3">
        <h6 class="text-danger"><i class="fas fa-exclamation-triangle me-1"></i>Low Stock</h6>
        {% for item in low_stock %}
        <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
            <div>
                <small class="fw-bold">{{ item.medication.name }}</small><br>
                <small class="text-muted">Stock: {{ item.current_stock }} / Min: {{ item.minimum_stock_level }}</small>
            </div>
            <span class="badge bg-danger">{{ item.current_stock }}</span>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    
    <!-- Expiring Items -->
    {% if expiring %}
    <div class="mb-3">
        <h6 class="text-warning"><i class="fas fa-clock me-1"></i>Expiring Soon</h6>
        {% for item in expiring %}
        <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
            <div>
                <small class="fw-bold">{{ item.medication.name }}</small><br>
                <small class="text-muted">Expires: {{ item.expiry_date|date:"M d, Y" }}</small>
            </div>
            <span class="badge bg-warning">{{ item.expiry_date|timeuntil }}</span>
        </div>
        {% endfor %}
    </div>
    {% endif %}
    
    <!-- Expired Items -->
    {% if expired %}
    <div class="mb-3">
        <h6 class="text-secondary"><i class="fas fa-calendar-times me-1"></i>Expired</h6>
        {% for item in expired %}
        <div class="d-flex justify-content-between align-items-center py-1 border-bottom">
            <div>
                <small class="fw-bold">{{ item.medication.name }}</small><br>
                <small class="text-muted">Expired: {{ item.expiry_date|date:"M d, Y" }}</small>
            </div>
            <span class="badge bg-secondary">Expired</span>
        </div>
        {% endfor %}
    </div>
    {% endif %}
{% else %}
    <div class="text-center py-3">
        <i class="fas fa-check-circle fa-2x text-success mb-2"></i>
        <p class="text-muted mb-0">No inventory alerts</p>
        <small class="text-muted">All items are properly stocked</small>
    </div>
{% endif %}