Как получить id элемента модели, на котором щелкнули?

На главной странице моего сайта отображаются все возможные объявления, и при нажатии на одно из них пользователь переходит на страницу, где отображается информация об этом объявлении. (Эта страница еще не закончена.) Это означает, что мне нужно знать, на каком объявлении был сделан щелчок, поэтому мне нужен способ получить id объявления.

Я пытался сделать это, принимая id параметр/аргумент, который должен использоваться внутри функции, чтобы узнать, какой это листинг.

Я хочу, чтобы url был http://127.0.0.1:8000/[id]/[name of listing], где [id] и [name of lsiting] - фактические идентификаторы и имена объявлений. id должно быть числом, а name_of_listing - строкой. (id находится в Listing.id, а имя листинга находится в Listing.name - Listing является именем модели, а id и name являются полями).

Как получить идентификатор объявления по ссылке?

index.html: (здесь просто отображаются все объявления - я использовал комментарии, чтобы показать, где находятся ссылки)

<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: (попытка получить идентификатор листинга)

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: (то, что должно быть показано, когда пользователь нажимает на ссылку)

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

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

{% url 'listing' i.pk i.name %}

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

{% url 'listing' %}