{% load i18n %}

<div class="border p-2">
    <div id="note-form-template" class="d-none" data-url="{% url 'users:add_note' model='MODEL' pk='PK' %}">
        <div class="mb-2 border-bottom pb-2">
            <div class="clearfix">
                <h6 class="float-left">{% trans 'Dodaj notatkę' %}</h6>
                <a href="#" class="btn btn-xs btn-outline-dark float-right hide-note-form">&times;</a>
            </div>
            <div class="d-flex">
                <div class="flex-grow-1 mr-3">
                <input id="title" name="title" class="form-control mb-2" placeholder="{% trans 'Tytuł notatki' %}" />
                <textarea id="note" name="note" class="form-control" placeholder="{% trans 'Treść notatki' %}"></textarea>
                </div>
                <a href="#" class="btn btn-sm btn-outline-dark ml-auto align-self-end add-note">{% trans 'Dodaj' %}</a>
            </div>
        </div>
    </div>
    <div class="note-form"></div>
    <div>
        <div class="mb-2">
            <h6 class="mt-4 d-inline">{% trans 'Notatki' %}</h6>
            <a href="#" class="show-note-form btn btn-xs btn-outline-dark ml-2">{% trans 'Dodaj' %}</a>
        </div>
        <table class="table table-sm table-striped border notes-table mb-0" data-url="{% url 'users:get_notes' model='MODEL' pk='PK' %}">
            <tbody></tbody>
        </table>
    </div>
</div>