<!-- Combat State Partial - refreshable via HTMX -->

<div class="state-section">
    <h4>Encounter Info</h4>
    <div class="state-item">
        <div class="state-label">Round</div>
        <div class="state-value">{{ encounter.round_number or 1 }}</div>
    </div>
    <div class="state-item">
        <div class="state-label">Status</div>
        <div class="state-value">{{ encounter.status or 'active' }}</div>
    </div>
    <div class="state-item">
        <div class="state-label">Current Turn</div>
        <div class="state-value">
            {% if is_player_turn %}
            <span style="color: #60a5fa;">Your Turn</span>
            {% else %}
            <span style="color: #f87171;">Enemy Turn</span>
            {% endif %}
        </div>
    </div>
</div>

<!-- Player Card -->
{% if player_combatant %}
<div class="state-section">
    <h4>Player</h4>
    <div class="combatant-card player {% if player_combatant.combatant_id == current_turn_id %}active{% endif %} {% if player_combatant.current_hp <= 0 %}defeated{% endif %}">
        <div class="combatant-name">{{ player_combatant.name }}</div>

        <!-- HP Bar -->
        {% set hp_percent = (player_combatant.current_hp / player_combatant.max_hp * 100) if player_combatant.max_hp > 0 else 0 %}
        <div class="resource-bar">
            <div class="resource-bar-fill hp {% if hp_percent < 25 %}low{% endif %}"
                 style="width: {{ hp_percent }}%"></div>
        </div>
        <div class="resource-text">
            <span>HP</span>
            <span>{{ player_combatant.current_hp }}/{{ player_combatant.max_hp }}</span>
        </div>

        <!-- MP Bar -->
        {% if player_combatant.max_mp and player_combatant.max_mp > 0 %}
        {% set mp_percent = (player_combatant.current_mp / player_combatant.max_mp * 100) if player_combatant.max_mp > 0 else 0 %}
        <div class="resource-bar" style="margin-top: 0.5rem;">
            <div class="resource-bar-fill mp" style="width: {{ mp_percent }}%"></div>
        </div>
        <div class="resource-text">
            <span>MP</span>
            <span>{{ player_combatant.current_mp }}/{{ player_combatant.max_mp }}</span>
        </div>
        {% endif %}
    </div>
</div>
{% endif %}

<!-- Enemy Cards -->
{% if enemy_combatants %}
<div class="state-section">
    <h4>Enemies ({{ enemy_combatants | length }})</h4>
    {% for enemy in enemy_combatants %}
    <div class="combatant-card enemy {% if enemy.combatant_id == current_turn_id %}active{% endif %} {% if enemy.current_hp <= 0 %}defeated{% endif %}">
        <div class="combatant-name">
            {{ enemy.name }}
            {% if enemy.current_hp <= 0 %}
            <span style="color: #6b7280; font-size: 0.75rem;">(Defeated)</span>
            {% endif %}
        </div>

        <!-- HP Bar -->
        {% set enemy_hp_percent = (enemy.current_hp / enemy.max_hp * 100) if enemy.max_hp > 0 else 0 %}
        <div class="resource-bar">
            <div class="resource-bar-fill hp {% if enemy_hp_percent < 25 %}low{% endif %}"
                 style="width: {{ enemy_hp_percent }}%"></div>
        </div>
        <div class="resource-text">
            <span>HP</span>
            <span>{{ enemy.current_hp }}/{{ enemy.max_hp }}</span>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}
