<div class="trip-park-item draggable-item flex items-center justify-between p-2 bg-gray-50 rounded-md" data-park-id="{{ park.id }}">
    <div class="flex items-center space-x-3">
        <div class="text-sm font-medium text-gray-900">{{ park.name }}</div>
        {% if park.location %}
        <div class="text-xs text-gray-500">{{ park.location.city }}</div>
        {% endif %}
    </div>
    <div class="flex items-center space-x-2">
        <button class="px-2 py-1 text-sm text-red-600 hover:text-red-800" 
                hx-post="{% url 'parks:htmx_remove_park_from_trip' %}" 
                hx-vals='{"park_id": "{{ park.id }}"}' 
                hx-swap="delete">
            Remove
        </button>
    </div>
</div>
