{% load i18n crispy_forms_tags %}
<div class="p-3">
<form hx-boost="true" id="noteform" action="{{url}}" method="post" hx-select=".note-table-body" hx-target=".note-table-body" hx-swap="outerHTML" hx-push-url="false">
    {% csrf_token %}
        {{form|crispy}}
    <div class="modal-footer">
        <button type="button" id="notesubmit" class="btn btn-outline-secondary" data-bs-dismiss="modal">{% trans "Cancel" %}</button>
        <button type="submit" class="btn btn-main-action" id="saveNoteBtn">{% trans "Save Note" %}</button>
    </div>
</form>
<div class="table-responsive mt-3">
    <table class="table table-sm" id="notesTable">
        <thead>
            <tr>
                <th scope="col">{% trans "Author" %}</th>
                <th scope="col" style="width: 60%;">{% trans "Note" %}</th>
                <th scope="col">{% trans "Created" %}</th>
                <th scope="col" class="text-end">{% trans "Actions" %}</th>
            </tr>
        </thead>
        <tbody class="note-table-body">
            {% if notes %}
                {% for note in notes %}
                    <tr id="note-{{ note.id }}">
                        <td class="align-middle">
                            {{ note.author.get_full_name|default:note.author.username }}
                        </td>
                        <td class="align-middle">
                            {{ note.content|linebreaksbr }}
                        </td>
                        <td class="align-middle text-nowrap">
                            <span class="text-muted">
                                {{ note.created_at|date:"SHORT_DATETIME_FORMAT" }}
                            </span>
                        </td>
                        <td class="align-middle text-end">
                            <button hx-delete="{% url 'delete_note' note.slug %}" hx-target="#note-{{ note.id }}" hx-swap="delete" type="button" class="btn btn-sm btn-outline-danger delete-note-btn">
                                {% trans "Delete" %}
                            </button>
                        </td>
                    </tr>
                {% endfor %}
            {% else %}
                <tr>
                    <td colspan="4" class="text-center text-muted py-3">{% trans "No notes yet." %}</td>
                </tr>
            {% endif %}
        </tbody>
    </table>
</div>
</div>