htmx + bootstrap modal

            <button type="button" class="btn btn-icon-info" hx-get="{{ post.url }}"> 
<i class="fa fa-window-restore"></i></button>
        

            <div class="modal fade" tabindex="-1" id="modal-snippet">
        <div  id="dialog" class="modal-dialog modal-dialog-scrollable" ></div>
</div>
        

            {% load wagtailcore_tags %}
<script>$('#modal-snippet').modal('show');htmx.on("hidden.bs.modal", () => {document.getElementById("dialog").innerHTML = ""})</script>
<div class="modal-content">
<div class="modal-header  bg-light-dark">
<h5 class="modal-title">{{ page.tajuk_detail}}</h5>
<button class="btn btn-icon btn-sm btn-active-light-primary ms-2"
  data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="fs-1 text-gray-500">&times;</span>
</button>
</div>
<div class="modal-body">
  {% for block in page.content %}
 {% include_block block %}
{% endfor %}
</div>
<div class="modal-footer bg-light-dark">
<button type="button" class="btn btn-outline btn-outline-info" data-bs-dismiss="modal">Kembali
</button>
</div>
</div>
        

            def get_context(self, request, *args, **kwargs):
        context = super().get_context(request, *args, **kwargs)

        all_post = Upload.objects.live().public().order_by('-first_published_at')
        paginator = Paginator(all_post, 4)
        page = request.GET.get('page')
        try:
            posts = paginator.page(page)
        except PageNotAnInteger:
            posts = paginator.page(1)
        except EmptyPage:
            posts = paginator.page(paginator.num_pages)

        context["posts"] = posts


        return context