{# Travel Modal Partial - displays available travel destinations #}
<div class="modal-overlay" onclick="this.remove()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <h3>Travel to...</h3>

        {% if locations %}
            {% for location in locations %}
            <button class="location-btn"
                    hx-post="{{ url_for('dev.do_travel', session_id=session_id) }}"
                    hx-vals='{"location_id": "{{ location.location_id }}"}'
                    hx-target="#dm-response"
                    hx-swap="innerHTML">
                <div class="location-name">{{ location.name }}</div>
                <div class="location-type">{{ location.location_type | default('Unknown') }}</div>
                {% if location.description %}
                <div class="location-desc" style="font-size: 0.75rem; color: #6b7280; margin-top: 0.25rem;">
                    {{ location.description[:80] }}{% if location.description|length > 80 %}...{% endif %}
                </div>
                {% endif %}
            </button>
            {% endfor %}
        {% else %}
            <p style="color: #9ca3af; text-align: center;">No locations available to travel to.</p>
            <p style="color: #6b7280; font-size: 0.85rem; text-align: center;">
                Discover new locations by exploring and talking to NPCs.
            </p>
        {% endif %}

        <button class="modal-close" onclick="this.closest('.modal-overlay').remove()">Cancel</button>
    </div>
</div>