{#
Monster Selection Modal
Shows random encounter options for the current location
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content monster-modal">
        <div class="modal-header">
            <h3 class="modal-title">⚔️ Search for Monsters</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <p class="monster-modal-location">
                Searching near <strong>{{ location_name }}</strong>...
            </p>
            {% if encounters %}
            <div class="encounter-options">
                {% for enc in encounters %}
                <button class="encounter-option encounter-option--{{ enc.challenge|lower }}"
                        hx-post="{{ url_for('game.start_combat', session_id=session_id) }}"
                        hx-vals='{"enemy_ids": {{ enc.enemies|tojson }}}'
                        hx-target="closest .modal-overlay"
                        hx-swap="outerHTML">
                    <div class="encounter-info">
                        <div class="encounter-name">{{ enc.display_name }}</div>
                        <div class="encounter-enemies">
                            {% for name in enc.enemy_names %}
                            <span class="enemy-badge">{{ name }}</span>
                            {% endfor %}
                        </div>
                    </div>
                    <div class="encounter-challenge challenge--{{ enc.challenge|lower }}">
                        {{ enc.challenge }}
                    </div>
                </button>
                {% endfor %}
            </div>
            <p class="monster-modal-hint">
                <small>Select an encounter to begin combat. Challenge level indicates difficulty.</small>
            </p>
            {% else %}
            <div class="encounter-empty">
                <p>No monsters found in this area.</p>
                <p><small>Try exploring somewhere more dangerous!</small></p>
            </div>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button class="btn btn-secondary" onclick="closeModal()">
                Cancel
            </button>
        </div>
    </div>
</div>