<li class="py-2 px-4 hover:bg-gray-100 cursor-pointer flex items-center justify-between" _="on click set the innerHTML of #exercise-results to ''
    then set the value of #exercise-search to '{{ exercise.name }}'
    then set the value of #selected-exercise to '{{ exercise.exercise_id }}'
    on click call htmx.trigger(document.body, 'exerciseSelected')">
    <!-- Exercise Name -->
    <span>{{ exercise.name }}</span>
    <!-- Edit Icon -->
    <a hx-get="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id, person_id=person_id) }}"
        hx-target="closest li" hx-swap="outerHTML" class="text-gray-500 hover:text-gray-700"
        _="on click from me call event.stopPropagation()">
        <!-- Edit icon SVG -->
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
            stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round"
                d="M15.232 5.232l3.536 3.536M4 20h4l12-12-4-4L4 16v4z" />
        </svg>
    </a>
</li>