{#
Travel Modal
Shows available destinations for travel
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content">
        <div class="modal-header">
            <h3 class="modal-title">🗺️ Travel</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p style="color: var(--text-secondary); margin-bottom: 1rem; font-size: var(--text-sm);">
                Choose your destination:
            </p>
            {% if destinations %}
            <div class="travel-destinations">
                {% for loc in destinations %}
                <button class="travel-destination"
                        hx-post="{{ url_for('game.do_travel', session_id=session_id) }}"
                        hx-vals='{"location_id": "{{ loc.location_id }}"}'
                        hx-target="#narrative-content"
                        hx-swap="innerHTML">
                    <div class="travel-destination-name">
                        {% if loc.location_type == 'town' %}🏘️
                        {% elif loc.location_type == 'tavern' %}🍺
                        {% elif loc.location_type == 'wilderness' %}🌲
                        {% elif loc.location_type == 'dungeon' %}⚔️
                        {% elif loc.location_type == 'ruins' %}🏚️
                        {% else %}📍
                        {% endif %}
                        {{ loc.name }}
                    </div>
                    <div class="travel-destination-meta">
                        {{ loc.location_type|capitalize }} • {{ loc.region }}
                    </div>
                </button>
                {% endfor %}
            </div>
            {% else %}
            <div class="quest-empty">
                No other locations discovered yet. Explore to find new places!
            </div>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()" style="width: auto; padding: 0.5rem 1rem;">
                Cancel
            </button>
        </div>
    </div>
</div>