<!-- Combat Items Bottom Sheet -->

<div class="sheet-backdrop" onclick="closeCombatSheet()"></div>
<div class="combat-items-sheet open">
    <div class="sheet-header">
        <h3>Use Item</h3>
        <button class="sheet-close" onclick="closeCombatSheet()">&times;</button>
    </div>

    <div class="sheet-body">
        {% if has_consumables %}
        <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.75rem;">
            {% for item in consumables %}
            <button style="
                padding: 1rem;
                background: #2a2a3a;
                border: 1px solid #4a4a5a;
                border-radius: 6px;
                cursor: pointer;
                text-align: left;
                transition: all 0.2s;
            "
            hx-get="{{ url_for('dev.combat_item_detail', session_id=session_id, item_id=item.item_id) }}"
            hx-target="#item-detail"
            hx-swap="innerHTML">
                <div style="color: #e5e7eb; font-weight: 500; margin-bottom: 0.25rem;">{{ item.name }}</div>
                <div style="color:
                    {% if item.rarity == 'uncommon' %}#10b981
                    {% elif item.rarity == 'rare' %}#3b82f6
                    {% elif item.rarity == 'epic' %}#a78bfa
                    {% elif item.rarity == 'legendary' %}#f59e0b
                    {% else %}#9ca3af{% endif %};
                    font-size: 0.75rem; text-transform: capitalize;">
                    {{ item.rarity }}
                </div>
            </button>
            {% endfor %}
        </div>

        <!-- Item Detail Panel -->
        <div id="item-detail" style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
            <div style="text-align: center; color: #6b7280; font-size: 0.9rem;">
                Select an item to see details
            </div>
        </div>
        {% else %}
        <div style="text-align: center; color: #6b7280; padding: 2rem;">
            No consumable items in inventory.
        </div>
        {% endif %}
    </div>
</div>

<style>
    .detail-info {
        background: #1a1a2a;
        border-radius: 6px;
        padding: 1rem;
        margin-bottom: 1rem;
    }

    .detail-name {
        color: #e5e7eb;
        font-weight: 600;
        margin-bottom: 0.5rem;
    }

    .detail-effect {
        color: #10b981;
        font-size: 0.9rem;
    }

    .use-btn {
        width: 100%;
        padding: 0.75rem;
        background: #10b981;
        color: white;
        border: none;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s;
    }

    .use-btn:hover {
        background: #059669;
    }
</style>
