{#
Equipment Modal
Displays character's equipped gear and inventory summary
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content modal-content--md">
        {# Modal Header #}
        <div class="modal-header">
            <h3 class="modal-title">Equipment & Gear</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>

        {# Modal Body #}
        <div class="modal-body">
            {# Equipment Grid #}
            <div class="equipment-grid">
                {% set slots = [
                    ('weapon', 'Weapon'),
                    ('armor', 'Armor'),
                    ('helmet', 'Helmet'),
                    ('boots', 'Boots'),
                    ('accessory', 'Accessory')
                ] %}

                {% for slot_id, slot_name in slots %}
                    {% set item = character.equipped.get(slot_id) %}
                    <div class="equipment-slot {% if item %}equipment-slot--equipped{% else %}equipment-slot--empty{% endif %}"
                         data-slot="{{ slot_id }}">
                        <div class="slot-header">
                            <span class="slot-label">{{ slot_name }}</span>
                        </div>

                        {% if item %}
                            {# Equipped Item #}
                            <div class="slot-item">
                                <div class="slot-icon">
                                    {% if item.item_type == 'weapon' %}⚔️
                                    {% elif item.item_type == 'armor' %}🛡️
                                    {% elif item.item_type == 'helmet' %}⛑️
                                    {% elif item.item_type == 'boots' %}👢
                                    {% elif item.item_type == 'accessory' %}💍
                                    {% else %}📦{% endif %}
                                </div>
                                <div class="slot-details">
                                    <div class="slot-item-name">{{ item.name }}</div>
                                    <div class="slot-stats">
                                        {% if item.damage %}
                                            <span class="stat-damage">{{ item.damage }} DMG</span>
                                        {% endif %}
                                        {% if item.defense %}
                                            <span class="stat-defense">{{ item.defense }} DEF</span>
                                        {% endif %}
                                        {% if item.stat_bonuses %}
                                            {% for stat, bonus in item.stat_bonuses.items() %}
                                                <span class="stat-bonus">+{{ bonus }} {{ stat[:3].upper() }}</span>
                                            {% endfor %}
                                        {% endif %}
                                    </div>
                                </div>
                            </div>
                        {% else %}
                            {# Empty Slot #}
                            <div class="slot-empty">
                                <div class="slot-icon slot-icon--empty">
                                    {% if slot_id == 'weapon' %}⚔️
                                    {% elif slot_id == 'armor' %}🛡️
                                    {% elif slot_id == 'helmet' %}⛑️
                                    {% elif slot_id == 'boots' %}👢
                                    {% elif slot_id == 'accessory' %}💍
                                    {% else %}📦{% endif %}
                                </div>
                                <div class="slot-empty-text">Empty</div>
                            </div>
                        {% endif %}
                    </div>
                {% endfor %}
            </div>

            {# Equipment Summary #}
            <div class="equipment-summary">
                <div class="summary-title">Total Bonuses</div>
                <div class="summary-stats">
                    {% set total_bonuses = {} %}
                    {% for slot_id, item in character.equipped.items() %}
                        {% if item and item.stat_bonuses %}
                            {% for stat, bonus in item.stat_bonuses.items() %}
                                {% if total_bonuses.update({stat: total_bonuses.get(stat, 0) + bonus}) %}{% endif %}
                            {% endfor %}
                        {% endif %}
                    {% endfor %}

                    {% if total_bonuses %}
                        {% for stat, bonus in total_bonuses.items() %}
                            <span class="summary-stat">+{{ bonus }} {{ stat[:3].upper() }}</span>
                        {% endfor %}
                    {% else %}
                        <span class="summary-none">No stat bonuses</span>
                    {% endif %}
                </div>
            </div>
        </div>

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