<!-- Combat Victory Screen -->

<div style="text-align: center; padding: 2rem;">
    <div style="font-size: 3rem; margin-bottom: 1rem;">&#127942;</div>
    <h2 style="color: #10b981; margin-bottom: 1rem;">Victory!</h2>
    <p style="color: #d1d5db; margin-bottom: 2rem;">You have defeated your enemies!</p>

    <!-- Rewards Section -->
    {% if rewards %}
    <div style="background: #2a2a3a; border-radius: 8px; padding: 1.5rem; margin-bottom: 1.5rem; text-align: left;">
        <h3 style="color: #f59e0b; margin-top: 0; margin-bottom: 1rem;">Rewards</h3>

        {% if rewards.experience %}
        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
            <span style="color: #9ca3af;">Experience</span>
            <span style="color: #a78bfa; font-weight: 600;">+{{ rewards.experience }} XP</span>
        </div>
        {% endif %}

        {% if rewards.gold %}
        <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
            <span style="color: #9ca3af;">Gold</span>
            <span style="color: #fbbf24; font-weight: 600;">+{{ rewards.gold }} gold</span>
        </div>
        {% endif %}

        {% if rewards.level_ups %}
        <div style="background: rgba(168, 85, 247, 0.2); border-radius: 6px; padding: 1rem; margin-top: 1rem;">
            <div style="color: #a78bfa; font-weight: 600;">Level Up!</div>
            <div style="color: #d1d5db; font-size: 0.9rem;">You have reached a new level!</div>
        </div>
        {% endif %}

        {% if rewards.items %}
        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #4a4a5a;">
            <div style="color: #9ca3af; font-size: 0.85rem; margin-bottom: 0.5rem;">Loot Obtained:</div>
            {% for item in rewards.items %}
            <div style="display: flex; align-items: center; padding: 0.5rem; background: #1a1a2a; border-radius: 4px; margin-bottom: 0.25rem;">
                <span style="color: #e5e7eb;">{{ item.name }}</span>
                {% if item.rarity and item.rarity != 'common' %}
                <span style="margin-left: 0.5rem; font-size: 0.75rem; color:
                    {% if item.rarity == 'uncommon' %}#10b981
                    {% elif item.rarity == 'rare' %}#3b82f6
                    {% elif item.rarity == 'epic' %}#a78bfa
                    {% elif item.rarity == 'legendary' %}#f59e0b
                    {% else %}#9ca3af{% endif %};">
                    ({{ item.rarity }})
                </span>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% endif %}
    </div>
    {% endif %}

    <!-- Actions -->
    <div style="display: flex; gap: 1rem; justify-content: center;">
        <a href="{{ url_for('dev.combat_hub') }}"
           style="padding: 0.75rem 1.5rem; background: #3b82f6; color: white; border-radius: 6px; text-decoration: none;">
            Back to Combat Hub
        </a>
        <a href="{{ url_for('dev.story_hub') }}"
           style="padding: 0.75rem 1.5rem; background: #6b7280; color: white; border-radius: 6px; text-decoration: none;">
            Continue Adventure
        </a>
    </div>
</div>
