{# Shared Ability Editor modals — used by card-editor.html and abilities.html #}
{# Requires parent Alpine context with: showAbilityModal, abilityForm, abilityModalTitle,
   editingAbilityIdx, saveAbility(), cancelAbilityEdit(), addAlterationInModal(),
   editAlterationInModal(), removeAlterationInModal(),
   showAlterationModal, alterationForm, alterationModalTitle,
   saveAlteration(), cancelAlterationEdit(), onEffectChange(), onStartTriggerChange(),
   initParamsForEffect(), isParamRef(), onParamRefChange(), toggleOptionalInt(),
   currentEffectParams, manaTypes, effects (Jinja2 loop vars), event_types, target_specs,
   trigger_owners, zone_types, param_refs, card_types, templateMode, templateCardId,
   templateData, spawnCount, catalogIds, markDirty #}

{% from "macros/mana_table.html" import mana_table %}

{# ── Ability Modal ── #}
<div class="modal-overlay" x-show="showAbilityModal" @click.self="cancelAbilityEdit()">
  <div class="modal-content modal-lg" @click.stop="">
    <div class="modal-header">
      <h3 x-text="abilityModalTitle"></h3>
      <button type="button" class="modal-close" @click="cancelAbilityEdit()">&times;</button>
    </div>
    <div class="modal-body">
      <div class="form-group">
        <label>Name</label>
        <input type="text" x-model="abilityForm.name" placeholder="e.g. Fire Breath">
      </div>
      <div class="form-group">
        <label>Description</label>
        <textarea x-model="abilityForm.description" rows="2"></textarea>
      </div>
      <div class="form-group">
        <label>Type</label>
        <select x-model="abilityForm.ability_type">
          {% for at in ability_types %}
          <option value="{{ at }}">{{ at }}</option>
          {% endfor %}
        </select>
      </div>

      {{ mana_table('abilityForm.mana_requirement', label='Mana Requirement') }}

      <div class="form-group" x-show="abilityForm.ability_type === 'activated' || abilityForm.ability_type === 'triggered'">
        <label>Max Activations (per turn)</label>
        <div class="number-stepper">
          <button type="button" class="btn btn-sm"
            @click="abilityForm.max_activations = abilityForm.max_activations == null ? null : (abilityForm.max_activations <= 1 ? null : abilityForm.max_activations - 1); markDirty()"
            title="Decrease">&#8722;</button>
          <span class="stepper-value" x-text="abilityForm.max_activations ?? 'unlimited'"></span>
          <button type="button" class="btn btn-sm"
            @click="abilityForm.max_activations = (abilityForm.max_activations ?? 0) + 1; markDirty()"
            title="Increase">+</button>
        </div>
      </div>

      <fieldset class="alterations-section">
        <legend>Alterations</legend>
        <div class="alteration-list">
          <template x-for="(alt, altIdx) in (abilityForm.alterations || [])" :key="altIdx">
            <div class="alteration-card clickable-row" @click="editAlterationInModal(altIdx)">
              <div class="alteration-summary">
                <span class="alt-effect" x-text="alt.effect || '?'"></span>
                <span class="alt-trigger" x-show="alt.start_trigger" x-text="'[' + alt.start_trigger + ']'"></span>
                <div class="alt-actions">
                  <button type="button" class="btn btn-sm btn-danger" @click.stop="removeAlterationInModal(altIdx)">Remove</button>
                </div>
              </div>
            </div>
          </template>
        </div>
        <div class="empty-state" x-show="!abilityForm.alterations || abilityForm.alterations.length === 0">
          No alterations defined.
        </div>
        <button type="button" class="btn btn-sm" @click="addAlterationInModal()">+ Add Alteration</button>
        <div class="catalog-picker" style="margin-top:6px">
          <select x-model="selectedCatalogAlterationId">
            <option value="">Use from Alterations Catalog...</option>
            <option value="" disabled x-show="catalogAlterationIds.length === 0">(no alterations registered yet)</option>
            <template x-for="aid in catalogAlterationIds" :key="aid">
              <option :value="aid" :title="(catalogAlterationsData[aid] || {}).description || ''"
                      x-text="(catalogAlterationsData[aid] || {}).name || aid"></option>
            </template>
          </select>
          <button type="button" class="btn btn-sm" @click="useAlterationFromCatalog()"
                  :disabled="!selectedCatalogAlterationId">Load</button>
        </div>
      </fieldset>
    </div>
    <div class="modal-actions">
      {% if ability_modal_extra == 'register' %}
      <button type="button" class="btn btn-success" @click="registerAbilityToCatalog()"
              x-show="!registeringToCatalog">Register in Catalog</button>
      <span x-show="registeringToCatalog" class="msg">Registering...</span>
      {% endif %}
      <button type="button" class="btn btn-primary" @click="saveAbility()">OK</button>
      <button type="button" class="btn" @click="cancelAbilityEdit()">Cancel</button>
    </div>
  </div>
</div>

{# ── Alteration Modal (stacks on top of ability modal) ── #}
{% include "components/alteration_editor.html" %}