Django - заполнение данных в форме обновления с помощью Bootstrap Modal

Я создаю простое приложение с 2 моделями. Unit & Note. В модели Note есть поле с внешним ключом (Unit). Теперь я пытаюсь редактировать каждую заметку внутри детального представления Unit (не детального представления Note) с помощью Bootstrap Modal. Я не знаю, как получить note_id, чтобы использовать его для экземпляра формы Note. Сейчас я получаю только пустую форму, и если я сохраняю ее, она перезаписывает исходные данные пустыми данными.

Вот код. Буду очень признателен за помощь, так как я застрял с этим уже довольно давно.

models.py

class Unit(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    number = models.CharField(max_length=10)

    def __str__(self):
        return self.number

    class Meta:
        ordering = ('number',)

    def get_absolute_url(self):
        return reverse("unit-detail", args=[str(self.id)])


class Note(models.Model):
    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
    unit = models.ForeignKey(Unit, on_delete=models.CASCADE, related_name="notes")
    title = models.CharField(max_length=30)
    note = models.TextField()
    created_date = models.DateField()

    def __str__(self):
        return self.title

views.py

def unit_detail(request, pk):
    unit = Unit.objects.prefetch_related('notes').get(id=pk)
    # How do I pass instance for note_form ???
    note_form = NoteModelForm(instance=???)
    context = {
        "unit":unit,
        "note_form":note_form,
    }
    return render(request, "units/unit_detail.html", context)

# Update note
class NoteUpdateView(generic.UpdateView):
    template_name = "units/note_update.html"
    form_class = NoteModelForm

    def get_queryset(self):
        queryset = Note.objects.all()
        return queryset

    def get_success_url(self):
        unit_id = self.object.unit.id
        return reverse("unit-detail", kwargs={'pk' : unit_id})

urls.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path("__reload__/", include("django_browser_reload.urls")),
    path('', UnitListView.as_view(), name="home"),
    # Unit
    path('unit/<uuid:pk>/detail', unit_detail, name="unit-detail"),
    # Note
    path('note/<uuid:pk>/update', NoteUpdateView.as_view(), name="note-update"),
]

forms.py

class DateInput(forms.DateInput):
    input_type = 'date'


class UnitModelForm(forms.ModelForm):
    class Meta:
        model = Unit
        fields = (
            'number',
        )


class NoteModelForm(forms.ModelForm):
    class Meta:
        model = Note
        fields = (
            'unit',
            'title',
            'note',
            'created_date'
        )
        # Custom widgets
        widgets = {
            'created_date': DateInput(),
        }

и шаблоны unit_detail.html

{% extends "base.html" %}

{% block content %}

<div class="card" style="width: 48rem;">
    <div class="card-body">
        <h5 class="card-title">{{ unit.number }}</h5>
        <h6 class="card-subtitle mb-2 text-muted" id="unit-id">{{ unit.id }}</h6>
        <p class="card-text">Note:</p>
        {% for note in unit.notes.all %}
        <!-- Include templates -->
        {% include 'units/note_update.html' %}
        <table>
            <tbody>
                <th scope="row">{{ note.title }}</th>
                <td>{{ note.unit }}</td>
                <td>{{ note.note }}</td>
                <td>{{ note.created_date }}</td>
                <td id="note-id">{{ note.id }}</td>
                <td><a data-bs-toggle="modal" data-bs-target="#exampleModal{{ note.id }}" class="card-link"
                        type="button" id="note-edit-btn">Edit</a>
                    <a href="#" class="card-link">Delete</a>
                </td>
            </tbody>
        </table>

        {% endfor %}

    </div>
</div>

note_update.html

{% load crispy_forms_tags %}

<!-- Modal -->
<div class="modal fade" id="exampleModal{{ note.id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <form method="POST" action="{% url 'note-update' note.pk %}">
            <!-- Security token -->
            {% csrf_token %}
            
            <div class="modal-body">
                {{ note_form|crispy }}                  
            </div>
        
            <div class="modal-footer">
                <button type="reset" class="btn btn-outline-secondary">Reset</button>
                <button type="submit" class="btn btn-primary">Update</button>
            </div>
        </form>
      </div>
    </div>
  </div>

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