Htmx Django

#urls.py
path("pillars/hajj-form/", create_pillars_hajj_form, name="pillars-hajj"),
path('pillars/path/<int:pk>/detail/', pillars_detail, name="detail-pillars"),
path('pillars/path/<int:pk>/delete/', delete_pillar, name="delete-pillars"),
path('pillars/path/<int:pk>/update/', update_pillar, name="update-pillars"),
path('pillars/create/', create_pillar, name='pillars-creates'),

#views.py
def create_pillars_hajj_form(request):
    pillars_form = PillarsHajjForm(request.POST, request.FILES)
    context = {
        "form": pillars_form
    }
    return render(request, "pillars/pillars-form.html", context)

def create_pillar(request):
    pillars = PillarsHajj.objects.all()

    if request.method == "POST":
        form = PillarsHajjForm(request.POST, request.FILES)
        if form.is_valid():
            pillar_instance = form.save(commit=False)
            pillar_instance.save()
            return redirect("detail-pillars", pk=pillar_instance.id)
        else:
            return render(request, "pillars/pillars-form.html", context={
                "form": form
            })
    else:
        form = PillarsHajjForm()
    context = {
        "form": form,
        "pillars": pillars,
        "navbar": "pillars",
    }
    return render(request, "pillars/pillars.html", context)


def pillars_detail(request, pk):
    try:
        pillar = PillarsHajj.objects.get(id=pk)
    except PillarsHajj.DoesNotExist:
        raise Http404
    context = {
        "pillar": pillar
    }
    return render(request, "uadmin/admin/pillars/pillar-detail.html", context)
def update_pillar(request, pk):
    pillar = get_object_or_404(PillarsHajj, pk=pk)

    if request.method == "POST":
        form = PillarsHajjForm(request.POST,request.FILES, instance=pillar)
        if form.is_valid():
                form.save()
                return redirect("detail-pillars", pk=pillar.id)
    else:
        form = PillarsHajjForm()
    context = {
        "form": form,
        "pillar": pillar,
    }

    return render(request, "uadmin/admin/pillars/pillars-form.html", context)


def delete_pillar(request, pk):
    pillar = get_object_or_404(PillarsHajj, pk=pk)

    if request.method == "POST":
        pillar.delete()
        return HttpResponse("")

    return HttpResponseNotAllowed(
        [
            "POST",
        ]
    )


#html
#pillars-form.html
<div hx-target="this" hx-swap="outerHTML" class="mt-3 py-3 px-3 bg-white shadow border border-gray-100">
    <form method="POST" enctype="multipart/form-data" hx-encoding='multipart/form-data' >
        {% csrf_token %}
        <div class="form-row">
            <div class="col-md-3">
                {{ form.title|as_crispy_field }}
            </div>
            <div class="col-md-3">
                {{ form.images|as_crispy_field }}
            </div>
            <div class="col-md-3">
                {{ form.description|as_crispy_field }}
            </div>
        </div>
        {% if pillar %}
            <button type="submit" hx-post="{% url 'update-pillars' pk=pillar.pk %}"
                    class="btn btn-sm btn-success">
                Редактировать
            </button>
            <button hx-get="{% url 'detail-pillars' pk=pillar.pk %}" type="button"
                    class="btn btn-sm btn-secondary">Отмена
            </button>
        {% else %}
            <button type="submit" hx-post="."
                    class="btn btn-sm btn-primary">
                Создать
            </button>
        {% endif %}
    </form>
</div>



#pillars.html
{% extends 'base_admin.html' %}
{% block content %}

    <script src="https://unpkg.com/[email protected]"></script>
    <script>
        document.body.addEventListener('htmx:configRequest', (event) => {
            event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
        })
    </script>
    <div class="d-flex justify-content-md-between">
        <button type="button" hx-get="{% url 'pillars-hajj' %}" hx-target="#pillars_forms"
                hx-swap="beforeend"
                class="btn btn-sm btn-primary">
            Добавить форму
        </button>

    </div>
    <div id="pillars_forms"></div>

    <div class="border-t border-gray-100">
        {% for pillar in pillars %}
            {% include "pillars/pillar-detail.html" %}
        {% endfor %}
    </div>

{% endblock %}

#pillar-detail.html

<div hx-target="this" class="mt-3 py-3 px-3 bg-white shadow border border-gray-100">
    <h4 class="text-lg leading-6 font-medium text-gray-900">
        Путь: {{ pillar.title }} - {{ pillar.description|safe }}
    </h4>
    <div class="mt-2">
        <button hx-get="{% url 'update-pillars' pk=pillar.pk %}" hx-swap="outerHTML"
                class="btn btn-sm btn-primary">Редактировать
        </button>
        <button hx-post="{% url 'delete-pillars' pk=pillar.pk %}" hx-swap="outerHTML swap:1s"
                class="btn btn-sm btn-danger"> Удалить
        </button>
    </div>
</div>