<!-- Ability Selection Modal -->

<div class="modal-overlay" onclick="closeModal()">
    <div class="modal-content" onclick="event.stopPropagation()">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <h3 style="margin: 0; color: #f59e0b;">Select Ability</h3>
            <button onclick="closeModal()" style="background: none; border: none; color: #9ca3af; font-size: 1.5rem; cursor: pointer;">&times;</button>
        </div>

        {% if abilities %}
        <div style="display: flex; flex-direction: column; gap: 0.5rem;">
            {% for ability in abilities %}
            <button style="
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1rem;
                background: {{ '#2a2a3a' if ability.available else '#1a1a2a' }};
                border: 1px solid {{ '#4a4a5a' if ability.available else '#3a3a4a' }};
                border-radius: 6px;
                cursor: {{ 'pointer' if ability.available else 'not-allowed' }};
                opacity: {{ '1' if ability.available else '0.5' }};
                text-align: left;
                transition: all 0.2s;
            "
            {% if ability.available %}
            hx-post="{{ url_for('dev.combat_action', session_id=session_id) }}"
            hx-vals='{"action_type": "ability", "ability_id": "{{ ability.id }}"}'
            hx-target="#combat-log"
            hx-swap="beforeend"
            onclick="closeModal()"
            {% else %}
            disabled
            {% endif %}>
                <div>
                    <div style="color: #e5e7eb; font-weight: 500;">{{ ability.name }}</div>
                    {% if ability.description %}
                    <div style="color: #9ca3af; font-size: 0.8rem; margin-top: 0.25rem;">{{ ability.description[:100] }}{% if ability.description|length > 100 %}...{% endif %}</div>
                    {% endif %}
                </div>
                <div style="text-align: right;">
                    {% if ability.mp_cost > 0 %}
                    <div style="color: #60a5fa; font-size: 0.85rem;">{{ ability.mp_cost }} MP</div>
                    {% endif %}
                    {% if ability.cooldown > 0 %}
                    <div style="color: #f59e0b; font-size: 0.75rem;">CD: {{ ability.cooldown }}</div>
                    {% endif %}
                </div>
            </button>
            {% endfor %}
        </div>
        {% else %}
        <div style="text-align: center; color: #6b7280; padding: 2rem;">
            No abilities available.
        </div>
        {% endif %}

        <button class="modal-close" onclick="closeModal()" style="width: 100%; margin-top: 1rem;">
            Cancel
        </button>
    </div>
</div>
