{# Item Selection Modal - Shows consumable items during combat #}

<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content modal-content--md">
        <div class="modal-header">
            <h3 class="modal-title">Use Item</h3>
            <button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
        </div>
        <div class="modal-body">
            {% if items %}
            <div class="item-list">
                {% for item in items %}
                <button class="item-btn"
                        hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
                        hx-vals='{"action_type": "item", "item_id": "{{ item.id }}"}'
                        hx-target="#combat-log"
                        hx-swap="beforeend"
                        hx-disabled-elt="this"
                        {% if item.quantity <= 0 %}disabled{% endif %}
                        onclick="closeModal()">
                    <span class="item-icon">
                        {% if 'health' in item.name|lower or 'heal' in item.effect|lower %}&#127863;
                        {% elif 'mana' in item.name|lower or 'mp' in item.effect|lower %}&#129389;
                        {% elif 'antidote' in item.name|lower or 'cure' in item.effect|lower %}&#129514;
                        {% elif 'bomb' in item.name|lower or 'damage' in item.effect|lower %}&#128163;
                        {% elif 'elixir' in item.name|lower %}&#129380;
                        {% else %}&#128230;
                        {% endif %}
                    </span>
                    <div class="item-info">
                        <span class="item-name">{{ item.name }}</span>
                        <span class="item-effect">{{ item.effect|default('Use in combat.') }}</span>
                    </div>
                    <span class="item-quantity">x{{ item.quantity }}</span>
                </button>
                {% endfor %}
            </div>
            {% else %}
            <div class="items-empty">
                <p>No usable items in inventory.</p>
                <p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
                    Purchase potions from merchants or find them while exploring.
                </p>
            </div>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
        </div>
    </div>
</div>