How do I get the id of the model item that is clicked on?

My main page on my website shows all the possible listings and when one of them is clicked on, the user is meant to be taken to a page that shows the listing’s information. (This page is not finished yet.) This means that I need to be able to know which listing has been clicked on so I need a way to get the id of the listing.

I’ve tried to do this by taking in a id parameter/argument that should be used inside the function to find out which listing this is.

I want the url to be http://127.0.0.1:8000/[id]/[name of listing] where [id] and [name of lsiting] and the actual ids and names of the listings. id should be a number and name_of_listing should be a string. (The id is in Listing.id and the name of the listing is in Listing.name – Listing is the name of the model and the id and name are fields.)

How do I get the id of a listing through a link?

index.html: (this just displays all the listings – I’ve used comments to show where the links are)

<main>
    <div class="listings-container">
        {% for i in listings %}
        <div class="listing">
            {% if i.photo_present != None %}
            <div class="img-container">
                {% if i.photo_url != None %}
                <div class="img-center">
                    <a href="{% url 'listing' i.id %}"> <!-- this is where the link is -->
                        <img src=" {{ i.photo_url }} " alt="">
                    </a>
                </div>
                {% else %}
                <div class="img-center">
                    <a href="{% url 'listing' i.id %}"> <!-- this is where the link is -->
                        <img src=" media/{{ i.photo_upload }} " alt="">
                    </a>
                </div>
                {% endif %}

                {% else %}
                <div class="img-center">
                    <img src="media/images/no-image.jpg" alt="No Image">
                </div>
            </div>
            {% endif %}
            <div class="listing-separation"></div>
            <div class="info-container">
                <div class="top-info">
                    <div class="listing-title">
                        <a href="{% url 'listing' %}"> <!-- this is where the link is -->
                            <h4>{{ i.name }}</h4>
                        </a>
                    </div>
                    <div class="listing-price">
                        <a href="{% url 'listing' %}"> <!-- this is where the link is -->
                            <strong>£{{ i.highest_bid }}</strong>
                        </a>
                    </div>
                </div>
                <div class="listing-description">
                    <a href="{% url 'listing' %}"> <!-- this is where the link is -->
                        <p>{{ i.description }}</p>
                    </a>
                </div>
            </div>
        </div>
        <hr>
        {% endfor %}
    </div>
</main>

views.py: (attempt to get the listing id)

from .models import Listing # this is the name of the model

def listing(request, id):
    listing = Listing.objects.get(pk=id)
    return render(request, 'auctions/listing.html', {
        'listings': Listing.objects.all(),
        'listing': listing
    })

urls.py:

path('<int:id>/<str:name>', views.listing, name='listing')

listing.html: (what should be shown when the user clicks on the link)

{% extends "auctions/layout.html" %}

{% block body %}
<h1>
    {{ listing.id }}
</h1>
{% endblock %}