<div id="workout-note-{{workout_id}}" hx-target="this" hx-swap="outerHTML swap:0.5s" class="animate-fadeIn">
    {% if is_edit|default(false, true) == false %}
    {% if note|length > 0 %}
    <span class="text-base font-normal text-gray-500 whitespace-normal">{{ note | replace('\n', '<br>') | safe }}</span>
    <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
        hx-get="{{ url_for('notes.get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
        hx-target="#workout-note-{{workout_id}}">
        Edit
    </a>
    {% else %}
    <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer float-none sm:float-right"
        hx-get="{{ url_for('notes.get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
        hx-target="#workout-note-{{workout_id}}">
        Add note
    </a>
    {% endif %}
    {% else %}
    <div class="flex items-center">
        <textarea
            class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 overflow-y-hidden"
            _="on load set my.style.height to my.scrollHeight + 'px'
             on input set my.style.height to 0 then set my.style.height to my.scrollHeight + 'px'"
            placeholder="Your note..." name="note">{{ note }}</textarea>
        <div class="flex flex-col">
            <button
                class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
                hx-get="{{ url_for('notes.get_workout_note', person_id=person_id, workout_id=workout_id) }}"
                hx-target="#workout-note-{{workout_id}}">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                </svg>
                <span class="sr-only">Cancel</span>
            </button>
            <button
                class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
                hx-put="{{ url_for('notes.update_workout_note', person_id=person_id, workout_id=workout_id) }}"
                hx-include="[name='note']">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                    stroke="currentColor" class="w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
                </svg>
                <span class="sr-only">Save note</span>
            </button>
        </div>
    </div>
    {% endif %}
</div>