Html – Django NoReverseMatch Error: How do I generate urls for each Model

I’m facing a NoReverseMatch error in my Django application when trying to generate URLs for product detail pages. The error message indicates that the URL pattern for ‘product-detail’ with the provided pk and slug is not found. Here are the details of my setup:

NoReverseMatch at /earrings
Reverse for ‘product-detail’ with arguments ‘(”, ”)’ not found. 1 pattern(s) tried: [‘product/(?P[0-9]+)/(?P[-a-zA-Z0-9_]+)/Z’]

Model:

class Product(models.Model):
    name = models.CharField(max_length=400)
    price = models.IntegerField(default=0)
    description = RichTextField(null=True, blank=True)
    slug = models.SlugField(unique=True, null=True, blank=True, max_length=400)
    create_at = models.DateTimeField(null=True, blank=True)
    id = models.AutoField(primary_key=True)
    
    def get_absolute_url(self):
        return reverse('product-detail', kwargs={'pk': self.pk, 'slug': self.slug})
    
    def __str__(self):
        return f'{self.name}'

View:

class ProductDetailView(DetailView): # this is the product detailView
    model = Product
    template_name = 'tehApp/product_detail.html'
    context_object_name = 'products'
    
    def get_context_data(self, *args, **kwargs):
        context = super(Product, self).get_context_data(*args, **kwargs)
        context['Bar'] = Bar.objects.first()
        context['Products'] = Product.objects.all()
        return context
    
    def get_object(self):
        return get_object_or_404(Product, pk=self.kwargs['pk'])

URL:

urlpatterns = [
    path('product/<int:pk>/<slug:slug>/', ProductDetailView.as_view(), name='product-detail'),
]

Template:

{% for product in products %}
<div class="item" data-name="{{ product.name }}" data-price="{{ product.price }}" data-date="{{ product.create_at|date:"Y-m-dTH:i:s" }}">
        <div class="relative">
            <div class="relative thumbnail">
                {% with images=product.images.all %}
                    {% if images|length > 0 %}
                        <a href="{% url 'product-detail' product.pk product.slug %}">
                            <img width="250px" height="250px" class="" src="{{ images.0.image.url }}" alt="">
                        </a>
                    {% endif %}
                    {% if images|length > 1 %}
                        <img width="100%" height="100%" class="hidden" src="{{ images.1.image.url }}" alt="">
                    {% endif %}
                {% endwith %}
                <a href="{% url 'product-detail' product.pk product.slug %}" class="absolute top-0 w-full h-full bg-transparent"></a>
                <div class="hidden quickaddtocart">Add to Cart</div>
            </div>
            <p class="caption"><a href="{% url 'product-detail' product.pk product.slug %}">{{ product.name }}</a></p>
            <div class="caption-price">${{ product.price }}</div>
        </div>
</div>
{% endfor %}

Please raise further questions if necessary,
Any help or insights would be greatly appreciated!