{% extends "base.html" %}

{% block title %}Defeated - Code of Conquest{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/combat.css') }}">
{% endblock %}

{% block content %}
<div class="combat-result combat-result--defeat">
    <div class="combat-result__icon">&#128128;</div>
    <h1 class="combat-result__title">Defeated</h1>
    <p class="combat-result__subtitle">Your party has fallen in battle...</p>

    {# Defeat Message #}
    <div class="combat-rewards" style="border-color: var(--accent-red);">
        <h2 class="rewards-title" style="color: var(--accent-red);">Battle Lost</h2>
        <div class="rewards-list">
            <div class="reward-item">
                <span class="reward-icon">&#9888;</span>
                <span class="reward-label">Your progress has been saved</span>
                <span class="reward-value" style="color: var(--text-muted);">No items lost</span>
            </div>
            {% if gold_lost %}
            <div class="reward-item">
                <span class="reward-icon">&#128176;</span>
                <span class="reward-label">Gold dropped</span>
                <span class="reward-value" style="color: var(--accent-red);">-{{ gold_lost }} gold</span>
            </div>
            {% endif %}
        </div>

        <div style="margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border-primary); text-align: center;">
            <p style="font-size: var(--text-sm); color: var(--text-secondary); font-style: italic;">
                "Even the mightiest heroes face setbacks. Rise again, adventurer!"
            </p>
        </div>
    </div>

    {# Action Buttons #}
    <div class="combat-result__actions">
        <a href="{{ url_for('game.play_session', session_id=session_id) }}" class="btn btn-primary">
            Return to Game
        </a>
        {% if can_retry %}
        <button class="btn btn-secondary"
                hx-post="{{ url_for('combat.combat_view', session_id=session_id) }}"
                hx-target="body"
                hx-swap="innerHTML">
            Retry Battle
        </button>
        {% endif %}
    </div>
</div>
{% endblock %}