{#
Inventory Modal
Full inventory management modal for play screen
#}
<div class="modal-overlay" onclick="if(event.target===this) closeModal()"
     role="dialog" aria-modal="true" aria-labelledby="inventory-title">
    <div class="modal-content inventory-modal">
        {# Header #}
        <div class="modal-header">
            <h2 class="modal-title" id="inventory-title">
                Inventory
                <span class="inventory-count">({{ inventory_count }}/{{ inventory_max }})</span>
            </h2>
            <button class="modal-close" onclick="closeModal()" aria-label="Close inventory">&times;</button>
        </div>

        {# Tab Filter Bar #}
        <div class="inventory-tabs" role="tablist">
            <button class="tab {% if filter == 'all' %}active{% endif %}"
                    role="tab"
                    aria-selected="{{ 'true' if filter == 'all' else 'false' }}"
                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='all') }}"
                    hx-target=".inventory-modal"
                    hx-swap="outerHTML">
                All
            </button>
            <button class="tab {% if filter == 'weapon' %}active{% endif %}"
                    role="tab"
                    aria-selected="{{ 'true' if filter == 'weapon' else 'false' }}"
                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='weapon') }}"
                    hx-target=".inventory-modal"
                    hx-swap="outerHTML">
                Weapons
            </button>
            <button class="tab {% if filter == 'armor' %}active{% endif %}"
                    role="tab"
                    aria-selected="{{ 'true' if filter == 'armor' else 'false' }}"
                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='armor') }}"
                    hx-target=".inventory-modal"
                    hx-swap="outerHTML">
                Armor
            </button>
            <button class="tab {% if filter == 'consumable' %}active{% endif %}"
                    role="tab"
                    aria-selected="{{ 'true' if filter == 'consumable' else 'false' }}"
                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='consumable') }}"
                    hx-target=".inventory-modal"
                    hx-swap="outerHTML">
                Consumables
            </button>
            <button class="tab {% if filter == 'quest_item' %}active{% endif %}"
                    role="tab"
                    aria-selected="{{ 'true' if filter == 'quest_item' else 'false' }}"
                    hx-get="{{ url_for('game.inventory_modal', session_id=session_id, filter='quest_item') }}"
                    hx-target=".inventory-modal"
                    hx-swap="outerHTML">
                Quest
            </button>
        </div>

        {# Body #}
        <div class="modal-body inventory-body">
            {# Item Grid #}
            <div class="inventory-grid-container">
                <div class="inventory-grid" id="inventory-items" role="listbox">
                    {% for item in inventory %}
                    <button class="inventory-item rarity-{{ item.rarity|default('common') }}"
                            role="option"
                            hx-get="{{ url_for('game.inventory_item_detail', session_id=session_id, item_id=item.item_id) }}"
                            hx-target="#item-detail"
                            hx-swap="innerHTML"
                            aria-label="{{ item.name }}, {{ item.rarity|default('common') }} {{ item.item_type }}">
                        <img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
                             alt="" aria-hidden="true">
                        <span class="item-name">{{ item.name }}</span>
                        {% if item.quantity and item.quantity > 1 %}
                        <span class="item-quantity">x{{ item.quantity }}</span>
                        {% endif %}
                    </button>
                    {% else %}
                    <p class="inventory-empty">
                        {% if filter == 'all' %}
                            No items in inventory
                        {% else %}
                            No {{ filter|replace('_', ' ') }}s found
                        {% endif %}
                    </p>
                    {% endfor %}
                </div>
            </div>

            {# Item Detail Panel #}
            <div class="item-detail" id="item-detail" aria-live="polite">
                <p class="item-detail-empty">Select an item to view details</p>
            </div>
        </div>

        {# Footer #}
        <div class="modal-footer">
            <span class="gold-display">{{ gold }}</span>
            <button class="btn btn--secondary" onclick="closeModal()">Close</button>
        </div>
    </div>
</div>

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

// Mobile: Show detail panel as slide-in
function showMobileDetail() {
    const detail = document.getElementById('item-detail');
    if (window.innerWidth <= 768 && detail) {
        detail.classList.add('visible');
    }
}

function hideMobileDetail() {
    const detail = document.getElementById('item-detail');
    if (detail) {
        detail.classList.remove('visible');
    }
}

// Listen for item detail loads on mobile
document.body.addEventListener('htmx:afterSwap', function(event) {
    if (event.detail.target.id === 'item-detail') {
        showMobileDetail();
    }
});
</script>
