Поделиться подробным представлением на модальное в django

Застревание при передаче подробного представления в модальное. Нашел этот ответ, но не могу понять его правильно. Ниже я привожу свой код.

Views.py

from django.shortcuts import render
from .models import Post
from django.views.generic.list import ListView
from django.urls import reverse_lazy


class PostListView(ListView):
    model = Post
    context_object_name = 'posts'
    template_name = 'f_home/index.html'

models.py

from django.db import models
from django.contrib.auth.models import User
# Create your models here.


class Post(models.Model):
    name = models.CharField(max_length=200, blank=True)
    email=models.CharField(max_length=200, blank=True)
    address=models.CharField(max_length=400, blank=True)
    weblink = models.URLField(max_length=200)
    image = models.ImageField(
        default='default.png', upload_to='uploads/%Y/%m/%d/')
    author = models.ForeignKey(User, on_delete=models.CASCADE)

    def __str__(self):
        return f'Added {self.name} Profile'

Шаблон

{% for post in posts %}
  <div class="purple card">
    <div class="image">
      <img src="{{ post.image.url }}">
    </div>
    <div class="content">
      <div class="header"><a href="{{ post.weblink }}">{{ post.name }}</a></div>
    </div>
    
      <div class="ui bottom attached button" onclick="pop()">
        <i class="globe icon"></i>
        <p>View Details</p>
      </div>
  </div>
  {% endfor %}

<div class="ui modal">
  <i class="close icon"></i>
  <div class="header">
    Modal Title
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="{% static 'images/cool-background.png' %}">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous"></script>

<script type="text/javascript">
    function pop(){
      $('.ui.modal').modal('show');
    }
</script>

Я хочу отобразить краткий список с кнопкой подробностей. Если пользователь захочет посмотреть подробности, то откроется всплывающий модал с подробностями в соответствии с данными модели. Не могу найти логику, как это сделать.

Как передать значение детали в modal, используя post id из details button в том же файле шаблона?

EDIT: Возможно ли это сделать без Js и JQuery?

Вернуться на верх