{# Ability Selection Modal - Shows available abilities during combat #}

<div class="modal-overlay" onclick="if(event.target === this) closeModal()">
    <div class="modal-content modal-content--md">
        <div class="modal-header">
            <h3 class="modal-title">Select Ability</h3>
            <button class="modal-close" onclick="closeModal()" aria-label="Close modal">&times;</button>
        </div>
        <div class="modal-body">
            {% if abilities %}
            <div class="ability-list">
                {% for ability in abilities %}
                <button class="ability-btn"
                        hx-post="{{ url_for('combat.combat_action', session_id=session_id) }}"
                        hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
                        hx-target="#combat-log"
                        hx-swap="beforeend"
                        hx-disabled-elt="this"
                        hx-on::before-request="closeModal()"
                        {% if not ability.available %}disabled{% endif %}>
                    <span class="ability-icon">
                        {% if ability.damage_type == 'fire' %}&#128293;
                        {% elif ability.damage_type == 'ice' %}&#10052;
                        {% elif ability.damage_type == 'lightning' %}&#9889;
                        {% elif ability.effect_type == 'heal' %}&#10084;
                        {% elif ability.effect_type == 'buff' %}&#11014;
                        {% elif ability.effect_type == 'debuff' %}&#11015;
                        {% else %}&#10024;
                        {% endif %}
                    </span>
                    <div class="ability-info">
                        <span class="ability-name">{{ ability.name }}</span>
                        <span class="ability-description">{{ ability.description|default('A powerful ability.') }}</span>
                    </div>
                    <div class="ability-meta">
                        {% if ability.mp_cost > 0 %}
                        <span class="ability-cost">{{ ability.mp_cost }} MP</span>
                        {% endif %}
                        {% if ability.cooldown > 0 %}
                        <span class="ability-cooldown ability-cooldown--active">{{ ability.cooldown }} turns CD</span>
                        {% elif ability.max_cooldown > 0 %}
                        <span class="ability-cooldown">{{ ability.max_cooldown }} turns CD</span>
                        {% endif %}
                    </div>
                </button>
                {% endfor %}
            </div>
            {% else %}
            <div class="items-empty">
                <p>No abilities available.</p>
                <p style="font-size: var(--text-xs); margin-top: 0.5rem; color: var(--text-muted);">
                    Learn abilities by leveling up or finding skill tomes.
                </p>
            </div>
            {% endif %}
        </div>
        <div class="modal-footer">
            <button class="btn btn--secondary" onclick="closeModal()">Cancel</button>
        </div>
    </div>
</div>