{#
Combat Items Sheet
Bottom sheet for selecting consumable items during combat
#}
<div class="combat-items-sheet open" role="dialog" aria-modal="true" aria-labelledby="combat-items-title">
    {# Drag handle for mobile #}
    <div class="sheet-handle" aria-hidden="true"></div>

    {# Sheet header #}
    <div class="sheet-header">
        <h3 id="combat-items-title">Use Item</h3>
        <button class="sheet-close" onclick="closeCombatSheet()" aria-label="Close">&times;</button>
    </div>

    {# Sheet body #}
    <div class="sheet-body">
        {# Consumables Grid #}
        <div class="combat-items-grid">
            {% for item in consumables %}
            <button class="combat-item"
                    hx-get="{{ url_for('combat.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
                    hx-target="#combat-item-detail"
                    hx-swap="innerHTML"
                    aria-label="{{ item.name }}">
                <img src="{{ url_for('static', filename='img/items/consumable.svg') }}" alt="">
                <span class="item-name">{{ item.name }}</span>
                <span class="item-effect">{{ item.description|truncate(30) }}</span>
            </button>
            {% else %}
            <p class="no-consumables">No usable items in inventory</p>
            {% endfor %}
        </div>

        {# Selected Item Detail + Use Button #}
        <div class="combat-item-detail" id="combat-item-detail">
            <p style="color: var(--text-muted); text-align: center;">Select an item to use</p>
        </div>
    </div>
</div>
<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>

<script>
// Handle item selection highlighting in combat sheet
document.querySelectorAll('.combat-item').forEach(item => {
    item.addEventListener('htmx:afterRequest', function() {
        // Remove selected from all items
        document.querySelectorAll('.combat-item.selected').forEach(i => i.classList.remove('selected'));
        // Add selected to clicked item
        this.classList.add('selected');
    });
});
</script>
