{#
Inventory Item Detail
Partial template loaded via HTMX when an item is selected
#}
<div class="item-detail-content">
    {# Mobile back button #}
    <button class="item-detail-back" onclick="hideMobileDetail()" aria-label="Back to inventory">
        &larr; Back to items
    </button>

    {# Item header #}
    <div class="item-detail-header">
        <img src="{{ url_for('static', filename='img/items/' ~ (item.item_type|default('default')) ~ '.svg') }}"
             class="item-detail-icon" alt="">
        <div class="item-detail-title">
            <h3 class="rarity-text-{{ item.rarity|default('common') }}">{{ item.name }}</h3>
            <span class="item-type">{{ item.item_type|default('Item')|replace('_', ' ')|title }}</span>
        </div>
    </div>

    {# Item description #}
    <p class="item-description">{{ item.description|default('No description available.') }}</p>

    {# Stats (for equipment) #}
    {% if item.item_type in ['weapon', 'armor'] %}
    <div class="item-stats">
        {% if item.damage %}
        <div>
            <span>Damage</span>
            <span>{{ item.damage }}</span>
        </div>
        {% endif %}
        {% if item.defense %}
        <div>
            <span>Defense</span>
            <span>{{ item.defense }}</span>
        </div>
        {% endif %}
        {% if item.spell_power %}
        <div>
            <span>Spell Power</span>
            <span>{{ item.spell_power }}</span>
        </div>
        {% endif %}
        {% if item.crit_chance %}
        <div>
            <span>Crit Chance</span>
            <span>{{ (item.crit_chance * 100)|round|int }}%</span>
        </div>
        {% endif %}
        {% if item.stat_bonuses %}
            {% for stat, value in item.stat_bonuses.items() %}
            <div>
                <span>{{ stat|replace('_', ' ')|title }}</span>
                <span>+{{ value }}</span>
            </div>
            {% endfor %}
        {% endif %}
    </div>
    {% endif %}

    {# Effects (for consumables) #}
    {% if item.item_type == 'consumable' and item.effects_on_use %}
    <div class="item-stats">
        <div class="item-stats-title" style="font-weight: 600; margin-bottom: 0.5rem;">Effects</div>
        {% for effect in item.effects_on_use %}
        <div>
            <span>{{ effect.name|default(effect.effect_type|default('Effect')|title) }}</span>
            <span>{{ effect.value|default('') }}</span>
        </div>
        {% endfor %}
    </div>
    {% endif %}

    {# Item value #}
    {% if item.value %}
    <div class="item-value" style="font-size: var(--text-sm); color: var(--accent-gold); margin-bottom: 1rem;">
        Value: {{ item.value }} gold
    </div>
    {% endif %}

    {# Action Buttons #}
    <div class="item-actions">
        {% if item.item_type == 'consumable' %}
        <button class="action-btn action-btn--primary"
                hx-post="{{ url_for('game.inventory_use', session_id=session_id) }}"
                hx-vals='{"item_id": "{{ item.item_id }}"}'
                hx-target="#character-panel"
                hx-swap="innerHTML"
                onclick="closeModal()">
            Use
        </button>
        {% elif item.item_type in ['weapon', 'armor'] %}
        <button class="action-btn action-btn--primary"
                hx-post="{{ url_for('game.inventory_equip', session_id=session_id) }}"
                hx-vals='{"item_id": "{{ item.item_id }}"{% if suggested_slot %}, "slot": "{{ suggested_slot }}"{% endif %}}'
                hx-target="#character-panel"
                hx-swap="innerHTML"
                onclick="closeModal()">
            Equip
        </button>
        {% endif %}

        {% if item.item_type != 'quest_item' %}
        <button class="action-btn action-btn--danger"
                hx-delete="{{ url_for('game.inventory_drop', session_id=session_id, item_id=item.item_id) }}"
                hx-target=".inventory-modal"
                hx-swap="outerHTML"
                hx-confirm="Drop {{ item.name }}? This cannot be undone.">
            Drop
        </button>
        {% else %}
        <p style="font-size: var(--text-xs); color: var(--text-muted); text-align: center; padding: 0.5rem;">
            Quest items cannot be dropped
        </p>
        {% endif %}
    </div>
</div>
