{#
Combat Conflict Modal
Shows when player tries to start combat but already has an active combat session
#}
<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content combat-conflict-modal">
        <div class="modal-header">
            <h3 class="modal-title">Active Combat Detected</h3>
            <button class="modal-close" onclick="closeModal()">&times;</button>
        </div>
        <div class="modal-body">
            <div class="conflict-warning">
                <p>You have an active combat session in progress:</p>
            </div>

            <div class="combat-summary">
                <div class="combat-summary-header">
                    <span class="combat-round">Round {{ combat_info.round_number }}</span>
                    <span class="combat-status combat-status--{{ combat_info.status }}">{{ combat_info.status|capitalize }}</span>
                </div>

                <div class="combatants-section">
                    <div class="combatants-group combatants-group--players">
                        <h4>Your Party</h4>
                        {% for player in combat_info.players %}
                        <div class="combatant-summary {% if not player.is_alive %}combatant-summary--dead{% endif %}">
                            <span class="combatant-name">{{ player.name }}</span>
                            <span class="combatant-hp">
                                {{ player.current_hp }}/{{ player.max_hp }} HP
                            </span>
                        </div>
                        {% endfor %}
                    </div>

                    <div class="combatants-vs">VS</div>

                    <div class="combatants-group combatants-group--enemies">
                        <h4>Enemies</h4>
                        {% for enemy in combat_info.enemies %}
                        <div class="combatant-summary {% if not enemy.is_alive %}combatant-summary--dead{% endif %}">
                            <span class="combatant-name">{{ enemy.name }}</span>
                            <span class="combatant-hp">
                                {% if enemy.is_alive %}
                                {{ enemy.current_hp }}/{{ enemy.max_hp }} HP
                                {% else %}
                                Defeated
                                {% endif %}
                            </span>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>

            <div class="conflict-options">
                <p>What would you like to do?</p>
            </div>
        </div>
        <div class="modal-footer conflict-actions">
            <a href="{{ url_for('combat.combat_view', session_id=session_id) }}"
               class="btn btn-primary btn-resume">
                Resume Combat
            </a>
            <button class="btn btn-danger btn-abandon"
                    hx-post="{{ url_for('game.abandon_and_start_combat', session_id=session_id) }}"
                    hx-vals='{"enemy_ids": {{ pending_enemy_ids|tojson }}}'
                    hx-swap="none"
                    hx-confirm="Are you sure you want to abandon your current combat? You will not receive any rewards.">
                Abandon & Start New
            </button>
            <button class="btn btn-secondary" onclick="closeModal()">
                Cancel
            </button>
        </div>
    </div>
</div>

<style>
.combat-conflict-modal {
    max-width: 500px;
}

.conflict-warning {
    background: var(--color-warning-bg, rgba(255, 193, 7, 0.1));
    border: 1px solid var(--color-warning, #ffc107);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.conflict-warning p {
    margin: 0;
    color: var(--color-warning, #ffc107);
    font-weight: 500;
}

.combat-summary {
    background: var(--color-surface, #2a2a2a);
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
}

.combat-summary-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border, #444);
}

.combat-round {
    font-weight: 600;
    color: var(--color-text-secondary, #aaa);
}

.combat-status {
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.85rem;
    font-weight: 500;
}

.combat-status--active {
    background: var(--color-success-bg, rgba(40, 167, 69, 0.2));
    color: var(--color-success, #28a745);
}

.combatants-section {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.combatants-group {
    flex: 1;
}

.combatants-group h4 {
    font-size: 0.85rem;
    color: var(--color-text-secondary, #aaa);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.combatants-vs {
    padding: 0.5rem;
    color: var(--color-text-muted, #666);
    font-weight: 600;
    align-self: center;
}

.combatant-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0.5rem;
    background: var(--color-bg, #1a1a1a);
    border-radius: 4px;
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.combatant-summary--dead {
    opacity: 0.5;
    text-decoration: line-through;
}

.combatant-name {
    font-weight: 500;
}

.combatant-hp {
    color: var(--color-text-secondary, #aaa);
    font-size: 0.85rem;
}

.combatants-group--players .combatant-hp {
    color: var(--color-health, #4ade80);
}

.combatants-group--enemies .combatant-hp {
    color: var(--color-danger, #ef4444);
}

.conflict-options {
    text-align: center;
    color: var(--color-text-secondary, #aaa);
}

.conflict-options p {
    margin: 0;
}

.conflict-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    justify-content: center;
}

.conflict-actions .btn {
    flex: 1;
    min-width: 120px;
}

.btn-resume {
    background: var(--color-primary, #8b5cf6);
}

.btn-abandon {
    background: var(--color-danger, #ef4444);
}

.btn-abandon:hover {
    background: var(--color-danger-hover, #dc2626);
}
</style>
