<li class="py-2 px-4 flex items-center justify-between">
    <!-- Input Field -->
    <input type="text" name="name" value="{{ exercise.name }}"
        class="w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
        _="on click from me call event.stopPropagation()">
    <!-- Save Icon -->
    <button hx-post="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id, person_id=person_id) }}"
        hx-target="closest li" hx-swap="outerHTML" hx-include="closest li"
        class="text-gray-500 hover:text-gray-700 ml-2" _="on click from me call event.stopPropagation()">
        <!-- Tick 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="M5 13l4 4L19 7" />
        </svg>
    </button>
    <!-- Delete Icon -->
    <button hx-delete="{{ url_for('delete_exercise', exercise_id=exercise.exercise_id, person_id=person_id) }}"
        hx-target="closest li" hx-swap="outerHTML" class="text-red-500 hover:text-red-700 ml-2"
        hx-confirm="Are you sure you wish to delete {{ exercise.name }} from exercises?"
        _="on click from me call event.stopPropagation()">
        <!-- Trash 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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6M9 7h6m2 0a2 2 0 00-2-2H9a2 2 0 00-2 2h12z" />
        </svg>
    </button>
</li>